Question

我正在通过“ JS for In耐心程序员”，遇到了以下代码。
我试图了解同步的性质以及为什么Blocking...等待sleep(5000)之后被设置。
我相信代码的意图是使Blocking...出现阻塞时出现在屏幕上，但这不是我在JSFiddle中输入时的实际响应

document.getElementById('block')
  .addEventListener('click', doBlock);

function doBlock(event) {
  setStatus('Blocking...');
  sleep(5000);
  setStatus('Done');
}

function sleep(milliseconds) {
  const start = Date.now();
  while ((Date.now() - start) < milliseconds);
}

function setStatus(status) {
  document.getElementById('statusMessage')
    .textContent = status;
}

<a id="block" href="#">Block</a>
<div id="statusMessage"></div>
<button>Click me!</button>

Answer 1

我可以与以下稍作改动的 HTML / JS代码分享我的发现。

Chromium版本73.0.3683.75（openSUSE Build）（64位）可以正常工作。
Firefox Developer Edition 67b6（64位）偶尔可以正常工作。
Firefox稳定量子60.6.1 ESR（64位）仍然无法正常工作。

但是，如果您延迟C毫秒，它也会在Firefox Stable Quantum 60.6.1 ESR浏览器上显示“正在阻止...”。

我的解释是（根据Mark在评论中所说），必须给浏览器时间来更新DOM。浏览器必须至少能够渲染一帧，显示呈现为“正在阻止...”状态消息的帧，然后才能进入阻止状态（此处持续5秒钟）。可以使用适当的调整后的setTimeout完成此操作，如下所示。 -关于M。

事件循环和同步阻止

1 个答案: