如何在JavaScript循环中添加延迟？

Question

如何在JavaScript循环中添加延迟？

我想在while循环中添加延迟/睡眠：

我试过这样的：

alert('hi');for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);}

只有第一种情况是真的：显示后alert('hi')，它将等待3秒然后alert('hello')将显示，但随后alert('hello')将反复不断。

我想要的是，在alert('hello')3秒后显示alert('hi')之后，它需要等待第二次3秒alert('hello')，依此类推。

Answer 1

尝试这样的事情：var&nbsp;i&nbsp;=&nbsp;0,&nbsp;howManyTimes&nbsp;=&nbsp;10;function&nbsp;f()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;"hi"&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;i++; &nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;i&nbsp;<&nbsp;howManyTimes&nbsp;){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(&nbsp;f,&nbsp;3000&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}}f();

Answer 2

如果使用ES6，您可以使用let以实现此目的：for&nbsp;(let&nbsp;i=1;&nbsp;i<10;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;setTimeout(&nbsp;function&nbsp;timer(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("hello&nbsp;world"); &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;i*3000&nbsp;);}为每次迭代let声明i了什么，而不是循环。这样，传递的内容正是我们想要的。setTimeout

Answer 3

由于ES7是等待循环的更好方法：function&nbsp;timer(ms)&nbsp;{ &nbsp;return&nbsp;new&nbsp;Promise(res&nbsp;=>&nbsp;setTimeout(res,&nbsp;ms));}async&nbsp;function&nbsp;load&nbsp;()&nbsp;{ &nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;3;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;console.log(i); &nbsp;&nbsp;&nbsp;&nbsp;await&nbsp;timer(3000); &nbsp;&nbsp;}}load();关于MDN的参考请注意，今天很少支持ES7，因此您需要与Babel进行交互，以便在任何地方使用它。Transpiled