同步 setTimeout + Loop [重复]答案

【问题标题】：Synchronous setTimeout + Loop [duplicate]同步 setTimeout + Loop [重复]
【发布时间】：2016-06-01 08:42:07
【问题描述】：

情况：

我有 X (0-20) 个图像需要按顺序显示，每个图像之间都有延迟。

我尝试使用 for 循环和 setTimeout 来实现它，但难以以同步顺序运行内部代码。

例如：

for(x=0;x<20;x++) {
setTimeout(doSomething(), 5000);
}


doSomething() {
setTimeout(function() {alert("test")},1000);
}

如果我没记错的话，我应该每 6 秒看到一次警报，持续 20 次。但是，发生的情况是 6 秒后我立即看到所有警报（或我放入 doSomething 的任何内容）

如何让我的 for 循环等待内码完成？

【问题讨论】：

或者你也可以这样做setTimeout(doSomething(), (x+1) * 5000);
您的方法将在前一个计时器的 5000 毫秒后安排每个计时器。假设第一个 doSomething() 花了大约 7000 毫秒，下一个 Timer 会因为我们处于单线程环境而延迟吗？

【解决方案1】：

这是 JavaScript 中的预期行为。您的第一个函数将几乎立即循环到结尾，而不是在 5000*20 毫秒内。

您可以这样做：创建一个内部带有 setTimeout 的 IIFE：

var i = 0;
(function loop(){
  if (i++ > 20) return;
  setTimeout(function(){
    alert("hi");
    loop();
  }, 5000);
})();

您可以简单地将alert("hi") 部分更改为doSomething()。

【讨论】：

只需要一点说明。他的第一个函数 doSomething() 将立即执行。将设置 20 个计时器，每个计时器将在 5000 毫秒内到期。一旦 5s 过去了，函数将开始执行。但是由于我们处于单线程环境中。每个计时器将一一启动。理解正确吗？
不，他的函数doSomething() 不会立即执行，因为它不会在任何地方被调用，除了定时器。这里的问题很简单，20 个计时器（几乎）同时设置，并且它们都（几乎）同时触发，调用 doSomething() 20 次。这是一个很好的解释：scottiestech.info/2014/07/01/…