如何在不停止 HTML 渲染的情况下停止代码的延迟？答案

【问题标题】：How to put a delay that stops the code without stop the HTML render?如何在不停止 HTML 渲染的情况下停止代码的延迟？
【发布时间】：2015-05-25 21:55:21
【问题描述】：

我需要在 for 循环中停止我的代码，停止时间的 sleep() 函数不起作用，因为我的 HTML 在那段时间内没有呈现，setTimeout 函数将在执行设置代码之前继续循环。

例如，这将显示带有 1、2、3 的警报，然后显示带有 Stop 的 3 个警报。

function test(){
  for (var i = 1;i<4;i++) {
    alert(i);
    setTimeout(function(){alert("Stop");},1000);
  }
}

在让 HTML 呈现的同时，我怎么能等到继续循环？

【问题讨论】：

除了 setTimeout 之外，您还应该研究异步解决方案。 Element.onload = function(){/* other code here */ } 或 var pre = onload; onload = function(){if(pre)pre(); /* other code here */}
你是说要先显示 alert(1) 然后 alert("Stop") 。然后经过一段时间的延迟，然后 alert(2) 然后 alert("Stop") 显示下一个。以此类推，直到 alert(4) 和 alert("Stop") 最后显示？
如何使用这些异步函数？
是的，我想这样做。

标签： javascript html delay settimeout sleep

【解决方案1】：

在您的示例中，您可以改用confirm 来显示一条消息，当用户单击时，您可以使用下一个setTimeout 来显示下一条消息。

但是，我认为这不是您真正想要的。

有很多方法可以执行不影响 html 呈现的异步 javascript，例如使用 Web Workers，或在 setTimeout 中传递函数，这些方法可以使用闭包来帮助跟踪您的位置，但是，还有下一个setTimeout 在某些处理和某些事件之后被调用，因为这些将允许渲染继续，直到某些事件或时间发生。

【讨论】：

【解决方案2】：

使用 DOMContentLoaded 事件检查 HTML 是否完全呈现：

<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    alert('html loaded');
  });
</script>

【讨论】：

我使用全局变量和while 循环来实现此事件处理程序，但循环无限。我在我的函数中设置了rendering=true 并且什么都不做while (rendering){} 并在事件处理程序中设置了rendering=false。你有什么想法让它发挥作用吗？