Comment implémenter correctement les retards dans les boucles JavaScript ?

Implémentation de délais dans les boucles JavaScript

Lorsque vous travaillez avec des boucles en JavaScript, il est parfois nécessaire d'introduire un délai ou une période de veille pour contrôler l'exécution couler. Explorons comment y parvenir à l'aide de la fonction setTimeout().

Tentative 1 : Utilisation de setTimeout()

Une approche courante consiste à utiliser setTimeout() pour créer un retard basé sur le temps. Cependant, placer setTimeout() directement dans une boucle peut entraîner un comportement inattendu. Par exemple, le code suivant tente de retarder chaque itération de 3 secondes :

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

Alors que ce code affichera initialement le message « bonjour » après 3 secondes, il affichera ensuite le message en continu sans aucun délai. Cela se produit parce que setTimeout() n'est pas bloquant et revient immédiatement, permettant à la boucle de se terminer avant que le délai ne soit écoulé.

Approche alternative : boucle itérative

Pour pour atteindre le délai souhaité, nous pouvons utiliser une boucle itérative avec un appel setTimeout() à l'intérieur d'une fonction :

var i = 1;

function myLoop() {
  setTimeout(function () {
    console.log('hello');
    i++;
    if (i < 10) {
      myLoop();
    }
  }, 3000);
}

myLoop();

Dans ce cas, la fonction myLoop() est appelée initialement, configurant le premier déclencheur setTimeout(). Ensuite, dans le rappel setTimeout(), le message est imprimé, le compteur est incrémenté et si le compteur est toujours inférieur à 10, la fonction myLoop() est à nouveau appelée. Cela garantit que la prochaine itération de la boucle n'est déclenchée qu'une fois le délai de 3 secondes écoulé.

En utilisant une boucle itérative en conjonction avec setTimeout(), vous pouvez efficacement introduire des retards dans les boucles JavaScript et contrôler le flux d'exécution avec précision.

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!