同步的setTimeout + 循环

Question

情况：

我有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循环等待内部代码完成呢？

- Steven

---

或者你也可以这样做：setTimeout(doSomething(), (x+1) * 5000); - Rajesh Jangid

你的实现方式是在前一个计时器启动5000ms后再启动下一个计时器。假设第一个doSomething()执行大约需要7000ms，由于我们处在单线程环境中，下一个计时器会被延迟吗？ - Behroz Sikander

Answer 1

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

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

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

这是fiddle链接: https://jsfiddle.net/f6ztxmgp/1/

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

- Gerardo Furtado

---

只需要澄清一下。他的第一个函数 doSomething() 将会立即执行。将设置 20 个定时器，每个定时器将在 5000 毫秒后到期。一旦过去了 5 秒，函数将开始执行。但由于我们处于单线程环境中，每个定时器都将逐个启动。这样理解正确吗？ - Behroz Sikander

不，他的函数doSomething()不会立即执行，因为除了计时器之外，它没有被任何地方调用。问题在于几乎同时设置了20个计时器，并且它们几乎同时触发，在调用doSomething() 20次。这里有一个很好的解释：https://scottiestech.info/2014/07/01/javascript-fun-looping-with-a-delay/ - Gerardo Furtado