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

看看下面的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)

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

超时设置 一秒钟过去了 一秒钟过去了，又睡了4秒钟 又过了4秒 回叫 因为第二个回调将在第一个回调之前排队，它将阻塞堆栈4秒以上

相反，我看到以下输出：

超时设置 5秒过去 回叫

---

这种行为背后的原因是什么？

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

下面是发生的情况：

innerText设置为超时设置。 第二个setTimeout在1秒后触发。 innerText设置为1秒，休眠4秒以上，但浏览器在释放执行线程之前不会重新呈现DOM。 pausecomp同步保持线程4秒。 pausecomp完成，第一个setTimeout立即执行，因为此时它已经排队。 innerText设置为callback called。 浏览器最终能够在5秒后重新呈现页面，并显示回调。

---

使用长阻塞while循环是一种可怕的做法。使用带有setTimeout的承诺来解决非阻塞延迟问题。在释放执行线程之前，浏览器无法重新呈现DOM-浏览器可以这样做。一些旧引擎确实这样做了，但它通常选择不这样做。@Bergi将cannot改为not。