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

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);
}

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

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!