Wie implementiert man eine verzögerte Ausführung in einer JavaScript-Schleife?
P粉680000555
2023-08-20 14:12:51
<p>Ich möchte eine Verzögerung/einen Ruhezustand in einer <code>while</code>-Schleife hinzufügen: </p>
<p>Ich habe Folgendes versucht: </p>
<pre class="brush:php;toolbar:false;">alert('hi');
for(var start = 1; start < 10; start++) {
setTimeout(function () {
alarm('hallo');
}, 3000);
}</pre>
<p>Nur der erste Fall ist korrekt: Nach der Anzeige von <code>alert('hi')</code> wird 3 Sekunden gewartet und dann <code>alert('hello')< angezeigt. /code>, aber dann wird <code>alert('hello')</code> wiederholt angezeigt. </p>
<p>Was ich möchte ist, dass nach 3 Sekunden der Anzeige von <code>alert('hello')</code> weitere 3 Sekunden gewartet werden muss, bevor <code>alert('hello')< angezeigt wird ;/code> usw. </p>
自从ES7以后,有一种更好的方法可以等待循环:
当引擎到达
await
部分时,它设置一个超时并暂停执行async函数
。然后,当超时完成时,执行在该点继续。这非常有用,因为您可以延迟(1)嵌套循环,(2)有条件的,(3)嵌套函数:MDN上的参考资料
尽管ES7现在已经被NodeJS和现代浏览器支持,但您可能希望使用使用BabelJS进行转译,以便在任何地方运行。
setTimeout()
函数是非阻塞的,并且会立即返回。因此,您的循环会非常快地迭代,并且会在快速连续的情况下触发3秒的超时。这就是为什么您的第一个警报在3秒后弹出,而其他所有警报都会连续跟随而没有任何延迟。您可能想使用类似以下的代码: