我正在经历“ JS对于不耐烦的程序员”,并且遇到了以下代码。
我试图了解同步的性质以及为什么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>

最佳答案

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


Chromium版本73.0.3683.75(openSUSE内部版本)(64位)可以正常工作。
Firefox Developer Edition 67b6(64位)有时会按预期工作。
Firefox Stable Quantum 60.6.1 ESR(64位)仍然无法正常工作。


但是,如果移到const delayBlocking = 50毫秒延迟,它也会在Firefox Stable Quantum 60.6.1 ESR浏览器上显示“正在阻止...”。

我的解释是(根据Mark的评论),必须给浏览器时间来更新DOM。浏览器必须至少能够渲染一帧,显示“ Blocking ...”状态消息,然后再进入阻塞状态(此处持续5秒钟)。可以使用适当的调整后的setTimeout完成此操作,如下所示。 -问候,M。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
    <a id="block" href="#">Block</a>
    <div id="statusMessage"></div>
    <button>Click me!</button>

    <script>
     document.getElementById('block')
             .addEventListener('click', doBlock);

     function doBlock(event) {
         setStatus('Blocking...');

         // Introducing some ...
         const delayBlocking = 0;

         setTimeout(function() {
             sleep(5000);
             setStatus('Done');
         }, delayBlocking);
     }

     function sleep(milliseconds) {
         const start = Date.now();
         while ((Date.now() - start) < milliseconds);
     }

     function setStatus(status) {
         document.getElementById('statusMessage')
                 .textContent = status;
     }
    </script>

</body>
</html>

10-06 00:18