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

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。