Warum gibt verschachteltes „setTimeout' in einer JavaScript-„for'-Schleife nicht aufeinanderfolgende Werte aus?

Das Problem verstehen: Nicht aufeinanderfolgende Wertedruck in setTimeout verschachtelt in for-Loop

In JavaScript planen asynchrone Funktionen wie setTimeout einen Rückruf nach einer Verzögerung ausführen. Wenn dies innerhalb einer Schleife platziert wird, kann dies zu unerwartetem Verhalten führen, bei dem die Variablen, auf die der Rückruf zugreift, möglicherweise nicht mit dem Status der Schleife synchronisiert sind.

Das Beispiel: Warnung vor falschen Werten

Beachten Sie das bereitgestellte Skript:

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

Dieser Code soll die Werte 1 und 2 nacheinander alarmieren, aber stattdessen gibt 3 zweimal aus. Der Grund liegt in der asynchronen Natur von setTimeout, das einen Rückruf erstellt, der auf den aktuellen Wert von i verweist.

Übergabe von i ohne Funktionszeichenfolge

Um dieses Problem zu beheben Um die fortlaufende Ausgabe von Werten sicherzustellen, müssen wir für jeden setTimeout-Rückruf eine eigene Instanz von i erstellen. Hier ist eine Lösung:

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

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

Indem wir für jeden Rückruf eine explizite Funktion erstellen und i als Argument übergeben, erstellen wir für jede Iteration der Schleife separate Kopien von i. Dadurch können die Rückrufe bei der Ausführung auf den korrekten Wert von i verweisen und so die aufeinanderfolgende Ausgabe von 1 und 2 sicherstellen.

Das obige ist der detaillierte Inhalt vonWarum gibt verschachteltes „setTimeout' in einer JavaScript-„for'-Schleife nicht aufeinanderfolgende Werte aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!