Pourquoi « setTimeout » dans une boucle « for » imprime-t-il des valeurs inattendues et comment cela peut-il être corrigé ?

Impression de valeurs consécutives dans des boucles for à l'aide de setTimeout

Problème :

Dans ce qui suit script, la fonction setTimeout est utilisée dans une boucle for pour alerter les valeurs de manière séquentielle. Cependant, le résultat obtenu montre que la valeur « 3 » est imprimée deux fois au lieu de « 1 » et « 2 » comme prévu.

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}

Raison :

Le problème se pose car la valeur de i dans la boucle for est modifiée au fil du temps, mais la fonction setTimeout ne capture qu'une référence à l'original. variable.

Solution :

Pour résoudre ce problème, la variable i doit être capturée comme une valeur unique pour chaque fonction de délai d'attente. Ceci peut être réalisé en créant une nouvelle fonction qui prend i comme argument puis appelle setTimeout avec cet argument :

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

for (var i = 1; i <= 2; ++i)
  doSetTimeout(i);

Avec cette approche, chaque itération de la boucle crée une copie distincte de la variable i, en veillant à ce que les valeurs alertées soient imprimées consécutivement comme prévu.

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!