在 javascript 中停止几秒钟的时间

Question

我的代码：

<!DOCTYPE html>
<html>
<body>
<button id="start" onClick="myFunction()">Start</button>
<div id="output"></div>
<script>
function myFunction() {
    for(i=3; i>0; i--) {
        console.log(i);
        document.getElementById('output').innerHTML = i;
        pause(5000);
    }
}

function pause(milliseconds) {
    var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
</script>
</body>
</html>

数字 3、2 和 1 以 5 秒的间隔出现在控制台中，但在 div 中，数字 1（实际上是所有数字）在 15 秒后出现。为什么控制台与显示不同步？是否存在其他方法来停止指令之间的 rime？

Answer 1

您的函数无法运行的原因基本上是 DOM 更改不会被处理和显示，直到一切都完成运行一秒钟。使其工作的最简单方法可能是调用 setTimeout 等待特定时间然后调用提供的函数。例如，您可以使用以下函数使您的代码正常工作。

此函数通过 setTimeout 调用递归调用自身以确保更新 DOM。

function myFunction(i) {
  (function doStuff() {
    console.log(i);
    document.getElementById('output').innerHTML = i;
    i -= 1;

    if (i >= 0) {
      setTimeout(doStuff, 5000);
    }
  }());
}

myFunction(3);

<div>
  Counter: <span id="output">X</span>
</div>

在 javascript 中停止几秒钟的时间

Stop time for a few seconds in javascript

javascript

pause