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

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 .