Comment implémenter correctement un délai dans une boucle JavaScript ?

Ajout d'un délai dans une boucle JavaScript

En JavaScript, il est courant de rencontrer des scénarios où un délai est requis dans une boucle pour contrôler le rythme d'exécution. Cependant, la mise en œuvre de ce délai peut être délicate.

Approche originale et ses pièges

Initialement, le code ci-dessous a été utilisé pour tenter d'introduire un délai de 3 secondes pour chaque itération de la boucle :

alert('hi');

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

Cependant, cette approche n'a pas permis d'obtenir le résultat escompté car la fonction setTimeout() est non bloquante. En conséquence, la boucle s’est exécutée rapidement, déclenchant plusieurs déclenchements de délai d’attente de 3 secondes en succession rapide. Cela a conduit à l'apparition de la première fenêtre contextuelle d'alerte (« bonjour ») après 3 secondes, suivie d'un flux constant de fenêtres contextuelles d'alerte (« bonjour ») sans aucun délai.

Résoudre le problème de retard

Pour résoudre ce problème, il est recommandé d'utiliser l'approche suivante :

var i = 1;                  // Set counter to 1

function myLoop() {         // Create loop function
  setTimeout(function() {   // Call 3s setTimeout when loop is called
    console.log('hello');   // Your code here
    i++;                    // Increment counter
    if (i < 10) {           // If counter < 10, call loop function
      myLoop();             // .. again, triggering another 
    }                       // .. setTimeout()
  }, 3000)
}

myLoop();                   // Start the loop

Cette approche révisée utilise une fonction récursive, myLoop(), qui lance un setTimeout() de 3 secondes chaque fois que la fonction est appelée. En incrémentant le compteur i dans le rappel setTimeout(), la fonction peut continuer l'itération de la boucle après le délai. Cela garantit que les itérations suivantes de la boucle attendent le temps spécifié avant de s'exécuter.

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!