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);

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

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

延迟0足以让大多数浏览器有机会进行渲染，但是当我需要这样做时，我通常不得不使用100和Firefox。（这可能只与稍微旧版本的Firefox有关;使用当前的Firefox，即使没有setTimeout，我也会在你的代码片段中看到DOM的变化。这至少是我在2018年5月写这篇文章时的新行为。）< / p>

Answer 2

浏览器不会立即更新DOM。您可以在调用alert（）函数之前添加延迟：

setTimeout(function(){ alert(x) }, 10);

Answer 3

设置现代浏览器，一旦遇到alert()浏览器，基本上会暂停HTML的呈现，直到alert()完成。

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

3 个答案: