为什么alert（）对话框首先显示，而不管代码中的顺序如何？

Question

在下面的代码示例中，我希望div中的文本首先更改。

但是，只有在警报对话框中单击“确定”后，文本才会更改。

var x = 0;

function counter() {
  x++;

  document.getElementById('aDiv').innerHTML = x;
  alert(x);
}

<div id="aDiv">
0
</div>
<input type="button" value="+1" onclick="counter()">

Answer 1

大多数浏览器仅在 JavaScript任务之间呈现对DOM的更改。（JavaScript代码在事件循环中作为离散任务运行，也称为作业队列中的作业。）alert及其表亲，confirm并且prompt是完全停止事件循环和UI的古老的停止世界功能。因此，尽管您已经对DOM进行了更改，但浏览器还没有机会alert在世界停止之前以可视方式呈现此更改。

如果您确实需要使用alert，请在超时后使用：

setTimeout(function() {
    alert(/*...*/);
}, 100);

setTimeout(function() {
    alert(/*...*/);
}, 100);

var x = 0;

function counter() {
  x++;

  document.getElementById('aDiv').innerHTML = x;
  setTimeout(function() {
    alert(x);
  }, 100);
}

延迟0足以使大多数浏览器有机会进行渲染，但是当需要这样做时，我通常必须在Firefox上使用100。（不过，这可能仅与稍旧的Firefox版本有关；对于当前的Firefox，即使没有，我也看到了您的代码段中的DOM变化setTimeout。这至少是我在2018年5月撰写的新行为。）