Maison > interface Web > js tutoriel > Comment puis-je introduire un délai dans une boucle JavaScript ?

Comment puis-je introduire un délai dans une boucle JavaScript ?

DDD
Libérer: 2024-12-18 10:22:11
original
786 Les gens l'ont consulté

How Can I Introduce a Delay into a JavaScript Loop?

Retarder une boucle JavaScript

Il est possible d'introduire un délai dans une boucle JavaScript à l'aide de la fonction setTimeout(). Cependant, le comportement par défaut de setTimeout() est de s'exécuter immédiatement. Pour introduire un délai, nous devons utiliser une boucle récursive.

Une façon d'y parvenir est d'utiliser une boucle for et d'appeler setTimeout() dans la boucle. Cependant, cette approche se heurte à un problème car tous les setTimeouts seront planifiés immédiatement, ce qui entraînera l'apparition de plusieurs alertes en même temps.

Pour résoudre ce problème, nous devons utiliser une fonction récursive qui s'appelle avec un délai. Le code suivant illustre cette approche :

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
Copier après la connexion

Dans ce code, nous créons une fonction récursive appelée myLoop() qui contient un setTimeout() de 3 secondes. Dans le délai imparti, nous incrémentons le compteur et vérifions s'il est inférieur à 10. Si c'est le cas, nous appelons à nouveau myLoop(), introduisant ainsi un délai entre chaque alerte.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal