Comment implémenter une exécution différée dans une boucle JavaScript ?
P粉680000555
2023-08-20 14:12:51
<p>Je souhaite ajouter un délai/veille dans une boucle <code>while</code>
<p>J'ai essayé ce qui suit : </p>
<pre class="brush:php;toolbar:false;">alert('salut');
pour(var start = 1; start < 10; start++) {
setTimeout (fonction () {
alert('bonjour');
}, 3000);
}</pré>
<p>Seul le premier cas est correct : après avoir affiché <code>alert('hi')</code>, il attendra 3 secondes puis affichera <code>alert('hello' )< /code>, mais ensuite <code>alert('hello')</code> </p>
<p>Ce que je veux, c'est qu'après 3 secondes d'affichage de <code>alert('hello')</code>, il doive attendre encore 3 secondes avant d'afficher <code>alert(' hello')< ;/code>, et ainsi de suite. </p>
Depuis ES7, il existe une meilleure façon de attendreboucler :
Lorsque le moteur atteint la section
attendre
, il définit un délai d'attente etawait
部分时,它设置一个超时并暂停执行async函数
interrompt l'exécution de lafonction asynchrone
. Ensuite, une fois le délai écoulé, l'exécution continue à ce stade. C'est très utile car vous pouvez différer (1) les boucles imbriquées, (2) les conditions, (3) les fonctions imbriquées :Références sur MDN
Bien qu'ES7 soit désormais pris en charge par NodeJS et les navigateurs modernes, vous souhaiterez peut-être utiliser Transpiling with BabelJS pour l'exécuter partout.
setTimeout()
La fonction est non bloquante et revient immédiatement. Ainsi, votre boucle itère très rapidement et déclenche le délai d'attente de 3 secondes en succession rapide. C'est pourquoi votre première alerte apparaît après 3 secondes et toutes les autres alertes suivent en continu sans aucun délai.Vous souhaiterez peut-être utiliser un code similaire à :