需要帮助来了解此代码中事件循环的行为

Question

看看下面的Javascript代码：

var content = document.body

function pausecomp(millis)
{
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < millis);
}

setTimeout(function () {
  content.innerText = "callback called"
}, 2000)

content.innerText = "timeout set"

setTimeout(function () {
  content.innerText = "one second passed, sleeping for 4 more seconds"
  pausecomp(4000)
}, 1000)

我希望在页面上显示以下输出：

1. “超时设置”
2. 一秒钟通过
3. “一秒钟过去了，再睡4秒钟”
4. 再过4​​秒
5. “已调用回调”

由于第二个回调将在第一个回调之前排队，它将阻塞堆栈4秒钟以上

相反，我看到以下输出：

1. “超时设置”
2. 5秒过去
3. “已调用回调”

此行为背后的原因是什么？

Answer 1

您看到的行为是单线程同步执行阻止DOM呈现的结果。

发生了什么事

1. innerText设置为timeout set。
2. 第二个setTimeout在1秒后触发。
3. innerText设置为one second passed, sleeping for 4 more seconds，但是浏览器在释放执行线程之前不会重新渲染DOM。
4. pausecomp同步将线程保持4秒钟。
5. pausecomp完成，第一个setTimeout立即执行，因为此时它已经排队。
6. innerText设置为callback called。
7. 浏览器终于​​能够重新呈现页面（经过5秒）并显示callback called。