Comment ajouter correctement des délais aux boucles JavaScript à l'aide de setTimeout() ?

Comment ajouter un délai dans une boucle JavaScript avec des délais d'attente

En JavaScript, l'ajout d'un délai dans une boucle peut être réalisé à l'aide de setTimeout () fonction. Cependant, il est important de comprendre son comportement pour éviter des résultats inattendus.

Considérons l'exemple suivant :

alert('hi');

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

Ce code a pour but d'afficher une alerte avec le texte "salut" puis d'afficher le envoyez le texte « bonjour » après un délai de 3 secondes, le délai se répétant pour les itérations suivantes. Cependant, en pratique, seule la première itération fonctionne comme prévu.

La raison de ce comportement réside dans la nature non bloquante de setTimeout(). Il déclenche une minuterie mais revient immédiatement, permettant à la boucle de continuer à s'exécuter avant que le délai de 3 secondes ne puisse se produire. Cela se traduit par une alerte immédiate de « bonjour » et des alertes ultérieures affichées en continu sans aucun délai.

Pour obtenir l'effet souhaité, une approche alternative peut être utilisée :

var i = 1; // set your counter to 1

function myLoop() { // create a loop function
  setTimeout(function() { // call a 3s setTimeout when the loop is called
    console.log('hello'); // your code here
    i++; // increment the counter
    if (i < 10) { // if the counter < 10, call the loop function
      myLoop(); // .. again which will trigger another 
    } // .. setTimeout()
  }, 3000);
}

myLoop(); // start the loop

Dans ce Dans cette approche, un compteur est initialisé et incrémenté dans la boucle. La fonction de boucle est appelée dans setTimeout(), garantissant que chaque itération a son propre délai de 3 secondes avant son exécution. En maintenant la boucle dans le rappel de setTimeout(), l'intervalle souhaité entre les alertes est atteint.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!