Warum erzeugt diese JavaScript-Schleife mit „setTimeout' unerwartete Ergebnisse?

Asynchrone Ausführung von Schleifen und setTimeout

Betrachten Sie das folgende Skript:

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

Im Gegensatz zu den erwarteten Werten von 1 und 2 sind die Das Skript gibt zweimal 3 aus. Dieses Verhalten entsteht durch die asynchrone Natur der JavaScript-Ereignisschleife.

Verstehen der JavaScript-Ereignisschleife

Die JavaScript-Ereignisschleife verarbeitet die Codeausführung in zwei Phasen: einem synchronen Stapel und einer asynchronen Warteschlange. Synchroner Code wird sofort im Stapel ausgeführt, während asynchroner Code wie setTimeouts zur späteren Ausführung in die Warteschlange gestellt wird.

Das Problem mit der Schleife

Im Skript der setTimeout-Rückruf Funktion verwendet die Variable i. Allerdings wird i von allen Iterationen der Schleife gemeinsam genutzt, und wenn der Rückruf ausgeführt wird, bezieht er sich immer auf den Endwert 2. Daher wird 3 beide Male ausgegeben.

Der richtige Ansatz

Um sicherzustellen, dass aufeinanderfolgende Werte gedruckt werden, erstellen Sie für jede Rückruffunktion eine eindeutige Kopie von i. Dies kann mithilfe eines Funktionsabschlusses erreicht werden, wie unten gezeigt:

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

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

In diesem Skript erfasst die Funktion doSetTimeout den Wert von i als lokale Variable für ihren Abschluss und stellt so sicher, dass jede Rückruffunktion den richtigen Wert verwendet Wert.

Das obige ist der detaillierte Inhalt vonWarum erzeugt diese JavaScript-Schleife mit „setTimeout' unerwartete Ergebnisse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!