Maison > interface Web > js tutoriel > Pourquoi « setTimeout » imbriqué dans une boucle JavaScript « for » imprime-t-il des valeurs non consécutives ?

Pourquoi « setTimeout » imbriqué dans une boucle JavaScript « for » imprime-t-il des valeurs non consécutives ?

Mary-Kate Olsen
Libérer: 2024-12-15 15:32:14
original
851 Les gens l'ont consulté

Why Does Nested `setTimeout` in a JavaScript `for` Loop Print Non-Consecutive Values?

Comprendre le problème : impression de valeurs non consécutives dans setTimeout imbriquée dans for-Loop

En JavaScript, les fonctions asynchrones comme setTimeout planifient un rappel à exécuter après un certain délai. Lorsqu'il est placé dans une boucle, cela peut conduire à un comportement inattendu où les variables accessibles par le rappel peuvent être désynchronisées avec l'état de la boucle.

L'exemple : alerte de valeurs incorrectes

Considérez le script fourni :

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}
Copier après la connexion

Ce code a pour but d'alerter les valeurs 1 et 2 consécutivement, mais à la place produit 3 deux fois. La raison réside dans la nature asynchrone de setTimeout, qui crée un rappel faisant référence à la valeur actuelle de i.

Passer i sans chaîne de fonction

Pour résoudre ce problème et assurer l'impression de valeurs consécutives, nous devons créer une instance distincte de i pour chaque rappel setTimeout. Voici une solution :

function doSetTimeout(i) {
  setTimeout(function() {
    alert(i);
  }, 100);
}

for (var i = 1; i <= 2; ++i)
  doSetTimeout(i);
Copier après la connexion

En créant une fonction explicite pour chaque rappel et en passant i comme argument, nous créons des copies distinctes de i pour chaque itération de la boucle. Cela permet aux rappels de référencer la valeur correcte de i lors de leur exécution, garantissant ainsi l'impression consécutive de 1 et 2.

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
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