Javascript JS-为什么会有这样的代码执行顺序？（初级）

JS代码执行顺序背后的逻辑是什么？ 我希望在点击按钮后背景变成红色，然后信息就会显示出来。但是，在单击“确定->后，首先显示消息，并将颜色应用于背景。 在单击“确定”之前，什么是使背景变红的正确方法

函数运行（）{
document.body.style.backgroundColor='红色'；
警惕（‘矛盾’）；
}

点击我！

试试这个

函数运行（）{
document.body.style.backgroundColor='红色'；
setTimeout（函数（）{
警惕（‘矛盾’）；
}, 0);
}

点击我！

代码是按照您期望的顺序执行的，但是，这些语句中的每一条都不是同步的，因为它们调用了Webbrowser提供的功能性

浏览器执行的Javascript不会出现在UI线程上。因此，当您更改DOM（允许Javascript与浏览器HTML交互的抽象）时，它会触发对UI（浏览器页面）的更新，该更新与Javascript执行分开进行。底层DOM元素已更新，但实际UI有一个非即时更新

在代码中，更改DOM元素后，代码会立即触发浏览器显示警报。显示警报是特定于浏览器的行为，对于Chrome，它会暂停UI更新，并要求您在继续之前与警报交互。在Firefox中，该警报在UI更新后显示

这两种浏览器之间的行为只是浏览器渲染引擎和事件循环实现方式的不同

函数运行（）{
document.body.style.backgroundColor='红色'；
setTimeout（函数（）{
警惕（‘矛盾’）；
},0 );
}

点击我！

这是由于

alert（）

调用是对模式对话框的调用。模式对话框是在对话框关闭之前阻止UI执行任何其他操作的对话框。这只是浏览器渲染颜色的速度不够快的问题，无法在JavaScript运行时转到下一条语句之前显示颜色。必须认识到，

alert（）

实际上是

窗口

对象的一种方法。您可以编写

window.alert（）

。了解这一点之后，您必须了解

窗口

对象不是JavaScript语言的本机部分<代码>窗口是一个浏览器对象，因此由浏览器而不是JavaScript运行时管理

我修改了您的代码，以便在控制台中显示消息，而不是警报。因为写入控制台是非UI阻塞的，所以可以立即看到颜色的变化

函数运行（）{
document.body.style.backgroundColor='红色'；
console.log（'contuturations！'）；
}

点击我！

这仍然不能解释为什么OP代码中的背景只有在关闭警报框后才会改变。您使用的是什么浏览器？它在Firefox中可以正常工作。@mseifert，我使用的是Chrome54。