Maison > interface Web > js tutoriel > Comment ajouter correctement des délais aux boucles JavaScript à l'aide de setTimeout() ?

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

Barbara Streisand
Libérer: 2024-12-19 11:33:09
original
490 Les gens l'ont consulté

How to Properly Add Delays to JavaScript Loops Using 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);
}
Copier après la connexion

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

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal