Wie kann ich verhindern, dass asynchrone Vorgänge die Schleifeniterationswerte in JavaScript stören?

Asynchrone Verarbeitung innerhalb einer JavaScript-for-Schleife: Werte der Schleifeniteration beibehalten

Bei der asynchronen Programmierung werden Vorgänge initiiert und führen ihre Ausführung unabhängig davon fort Hauptthread. Dies kann zu Problemen führen, wenn versucht wird, die Ergebnisse asynchroner Vorgänge mit dem Fortschritt eines synchronen Kontrollflusses, wie z. B. einer for-Schleife, zu synchronisieren.

Beachten Sie die folgende for-Schleife:

let i;
let j = 10;
for (i = 0; i < j; i++) {
  asynchronousProcess(callbackFunction() {
    alert(i);
  });
}

Das Ziel besteht darin, eine Reihe von Warnungen mit den Zahlen 0 bis 10 anzuzeigen. Aufgrund der asynchronen Natur der asynchronousProcess-Funktion wird die Rückruffunktion jedoch nach dem ausgelöst Schleife hat mehrere Iterationen abgeschlossen. Infolgedessen werden die Alarmwerte nicht in der vorgesehenen Reihenfolge angezeigt.

Lösung: Verwenden von Funktionsabschlüssen zum Erfassen von Schleifenwerten

Um dieses Problem zu beheben, ist es notwendig um sicherzustellen, dass jede Iteration der Schleife einen eindeutigen Wert von i hat, wenn die Rückruffunktion aufgerufen wird. Dies kann erreicht werden, indem die Schleifenvariable innerhalb eines Funktionsabschlusses erfasst wird.

Dies kann mithilfe eines IIFE (Immediately Invoked Function Expression) erreicht werden:

for (var i = 0; i < j; i++) {
  (function(cntr) {
    asynchronousProcess(function() {
      alert(cntr);
    });
  })(i);
}

In diesem Beispiel ist der Wert von i wird als cntr an das IIFE übergeben, und der Funktionsabschluss stellt sicher, dass jede Iteration ihren eigenen eindeutigen Wert von i hat.

Alternativ können Sie erstellen eine externe Funktion, die die Schleifenvariable als Parameter akzeptiert:

function logIndex(index) {
  console.log(index);
}

for (var i = 0; i < j; i++) {
  asynchronousProcess(logIndex.bind(null, i));
}

Mit ES6 lassen sich Variablendeklarationen erstellen

Mit der Einführung von ES6 ist es möglich, eine Schleife zu deklarieren Variablen mithilfe von let, wodurch blockbezogene Variablen erstellt werden. Dies stellt eine bequeme Möglichkeit dar, sicherzustellen, dass jede Iteration der Schleife ihren eigenen eindeutigen Wert von i hat:

for (let i = 0; i < j; i++) {
  asynchronousProcess(function() {
    alert(i);
  });
}

Hinweis:

Das ist wichtig zu beachten Jede dieser Lösungen erstellt zum Zeitpunkt des Funktionsabschlusses oder der Variablendeklaration eine Kopie der Schleifenvariablen. Wenn die Schleifenvariable nach Abschluss des asynchronen Vorgangs geändert wird, spiegeln diese Kopien nicht den aktualisierten Wert wider.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass asynchrone Vorgänge die Schleifeniterationswerte in JavaScript stören?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!