Javascript 为什么警报在背景更改之前出现？

所以，我最近一直在尝试一些东西，在我的脚本中得到了这段代码：

document.body.bgColor = "red";
alert("hello");

但在Chrome中，警报对话框首先弹出，只有在我关闭它之后，我身体的背景才会改变。在Firefox中，我得到了预期的行为，身体背景变为红色，然后弹出窗口

---

我知道我们不应该依赖警报和类似的浏览器控件，但有人能告诉我这种情况是因为行为不符合标准，还是因为我对同步执行上述代码的理解是错误的？

在弹出对话框之前，您最有可能通过让步来强制更改背景色在打开警报之前的短时间内，允许浏览器重新绘制

setTimeout(function () { alert("hello"); }, 1);

---

最简单的解决方法如下：

document.body.bgColor = "red";
setTimeout(function() {
        window.alert('Hello There!');
    },  10);

---

在我的例子中，超时值“9”是最小值，如果我使用渲染过程有自己的生命周期，并且不会阻塞javascript线程。他们都独立工作

解决方案是“暂停”JavaScript执行，让渲染线程跟上。这可以通过简单的

setTimeout

设置为

0

document.body.style.backgroundColor = "red";

setTimeout(function() {
  alert("hey");
}, 0)

---

请注意，自2003年以来，

bgColor

已被弃用。当前设置元素背景色的方法是通过

element.style.backgroundColor

谢谢。这很有帮助。如果这能保证渲染在

alert（）

inside

setTimeout（）

执行之前完成，那么有一件事会让我感到困扰？我的意思是，对于更复杂的CSS，是否存在类似于

onStylesApplied

的事件或可以挂接到渲染过程中的事件？在调用

setTimeout

之前，可以调用任意多个样式操作。这个答案是错误的。呈现并不独立于javascript执行。两者都是由同一个线程完成的，并且都相互阻塞。此警报暂停javascript执行，在javascript完全执行之前无法进行渲染。setTimeout（）将警报放入回调队列，该队列会导致警报在渲染后发生。请避免使用零（

0

）的

setTimeout（）

）。虽然一开始它确实对我有用，但我注意到，如果我移动鼠标（在单击启动警报的按钮后立即），在调用

alert（）

之前对DOM所做的更改仍然不起作用。我用

10

进行了测试，但最终还是用

100

进行了测试，因为它一直在工作（对于我们正在做的事情）。