Wie führt man asynchrone Prozesse in JavaScript-For-Schleifen korrekt aus?

Sequentielle Ausführung asynchroner Prozesse in JavaScript-For-Schleifen

Beim Erstellen asynchroner Prozesse innerhalb einer JavaScript-for-Schleife ist es wichtig, sich mit dem Problem zu befassen Beibehalten von Schleifenvariablenwerten. Standardmäßig wird die Schleife abgeschlossen, bevor die asynchronen Prozesse abgeschlossen sind, was zu falschen Variablenwerten in den Rückruffunktionen führt.

Lösungsansätze:

1. Verwenden von Funktionsabschlüssen:

   Durch Erstellen eines Inline- oder externen Funktionsabschlusses für jede Iteration des Schleife wird die Schleifenindexvariable innerhalb des Abschlusses eindeutig erfasst. Dadurch wird sichergestellt, dass jeder Rückruf Zugriff auf seinen eigenen Indexwert hat.

   Beispiel 1 (Inline-Abschluss):

   someArray.forEach(function(item, i) {
       asynchronousProcess(function() {
           console.log(i);
       });
   });

   Nach dem Login kopieren

   Beispiel 2 (Externer Abschluss) :

   (function(i) {
       asynchronousProcess(function() {
           console.log(i);
       });
   })(i);
   ````

   Nach dem Login kopieren

2. Ausbeutung ES6 Let:

   Wenn eine ES6-kompatible JavaScript-Umgebung verfügbar ist, kann das Schlüsselwort let in for-Schleifeninitialisierungen verwendet werden. let erstellt eine eindeutige Variable für jede Schleifeniteration und behebt das Bereichsproblem.

   for (let i = 0; i < 10; i++) {
       asynchronousProcess(function() {
           console.log(i);
       });
   }

   Nach dem Login kopieren

3. Serialisierung mit Versprechen:

   Wenn asynchrone Prozesse zurückkehren Versprechen, sie können serialisiert werden, um sie einzeln mit async und waiting auszuführen. Dies garantiert eine sequentielle Ausführung und verhindert, dass die Schleife fortschreitet, bis jede asynchrone Operation abgeschlossen ist.

   async function someFunction() {
       for (let i = 0; i < 10; i++) {
           await asynchronousProcess();
           console.log(i);
       }
   }

   Nach dem Login kopieren

4. Parallelisierung mit Promise.all():

   Um asynchrone Prozesse parallel auszuführen und Ergebnisse der Reihe nach zu sammeln, kann Promise.all() eingesetzt werden. Es gibt eine Reihe von Ergebnissen zurück, sobald alle Versprechen gelöst sind.

   function someFunction() {
       let promises = [];
       for (let i = 0; i < 10; i++) {
           promises.push(asynchonousProcessThatReturnsPromise());
       }
       return Promise.all(promises);

   Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie führt man asynchrone Prozesse in JavaScript-For-Schleifen korrekt aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!