为何alert()对话框会无视代码执行顺序优先弹出？

这事儿其实是浏览器的事件循环机制在搞鬼，我来给你掰扯清楚：

浏览器的JS执行和页面渲染是共用同一个主线程的，而且它们是互斥的——也就是说，JS在执行的时候，渲染引擎是被挂起的，得等JS任务跑完，才会轮到渲染更新。

看你的代码：

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

当你点击按钮触发counter函数时，流程是这样的：

1. 先把x加1，然后修改div的innerHTML
2. 这时候浏览器收到了更新DOM的请求，但因为JS还在执行（接下来要跑alert），所以它没法立刻去渲染页面
3. alert是同步模态对话框，它会直接阻塞主线程——不仅JS停在这里，渲染也完全被卡住，直到你点击确定关闭alert
4. 等alert关掉，counter函数执行完毕，主线程才终于有空去处理之前的渲染请求，这时候div的文本才会更新

怎么解决？ #

把alert放到下一个事件循环队列里，让当前的JS任务先结束，给浏览器留出渲染的时间。用setTimeout就能做到：

var x = 0;
function counter() {
  x++;
  document.getElementById('aDiv').innerHTML = x;
  // 把alert放到下一个事件循环
  setTimeout(() => {
    alert(x);
  }, 0);
}

这样修改后，counter函数执行完修改DOM的操作就结束了，浏览器会先完成页面渲染，然后再执行setTimeout里的alert，你就能先看到div文本更新，再弹出对话框啦~

内容的提问来源于stack exchange，提问作者Wit