Chrome-alert（）的Javascript执行顺序问题

今天我想知道Chrome中JavaScript函数alert的执行顺序

测试1测试1测试1测试1测试1 测试2测试2测试2测试2测试2 函数运行测试 { $'test1'.css'background-color'，'red'； 警报“test1”； $'test2'.css'background-color'，'red'； 警报'test2'； }

---

通过对类似问题进行一点研究，似乎可以得出正确的结论：

。。。style对象的更改会向页面呈现程序触发一条重绘请求消息，并在浏览器空闲时（此脚本例程结束后）立即处理该消息

显然，只有Chrome能做到这一点。

问题在于，警报是由浏览器软件呈现的，而不是由JavaScript运行时或CSS呈现引擎呈现的，而且浏览器的工作速度通常比JavaScript运行时快/慢。在这种情况下，在JavaScript运行时和CSS呈现引擎可以更改背景颜色之前呈现警报。由于警报是一个模式对话框，在警报关闭之前，用户界面的其余部分将被阻止，因此在此之前，您不会看到任何红色背景

此问题的解决方案是手动控制警报呈现，方法是将警报呈现延迟到当前功能使用计时器完成后：

函数运行测试{ $'test1'.css'background-color'，'red'； //计时器回调函数放置在事件队列中，并 //在JavaScript调用堆栈空闲之前不会运行。所以， //makeAlerttest1在runTest之后才会运行，这 //将允许浏览器将背景颜色设置为红色 //将呈现第一个警报。 setTimeoutfunction{ makeAlerttest1； }, 100; } 函数makeAlertmsg{ //现在，第一个背景已经应用，因此 //我们可以要求第一个警报。 alertmsg； //现在，我们将设置第二种背景色 $'test2'.css'background-color'，'red'； //并将第二次警报推迟到此功能之后 //完成了。 setTimeoutfunction{ 警报测试2； }, 100; } 测试1测试1测试1测试1测试1 测试2测试2测试2测试2测试2 函数运行测试{ setTimeoutfunction{ var a=document.querySelector'test1'； a、 style.backgroundColor='红色'； 警报“test1”； }, 100; setTimeoutfunction{ var a=document.querySelector'test2'； a、 style.backgroundColor='红色'； 警报'test2'； }, 200; } 测试1测试1测试1测试1测试1 测试2测试2测试2测试2测试2

---

在版本69.0.3497.100官方版本64位可能的副本中对我来说很好，请特别查看对已接受答案的注释。您的答案不包含任何关于问题是什么以及代码如何解决问题的解释或注释。而且，它本质上是相同的，并且是公认的答案，它在你的答案发布前大约15分钟发布。