Asynchrone Schleifen in JavaScript

Während JavaScript verschiedene Arten von Schleifen bereitstellt, kann es sinnvoll sein, eine Schleife zu erstellen, die die Ausführung anhält, um auf einen asynchronen Aufruf zu warten herausfordernd. Dies liegt daran, dass das Mischen von synchronem und asynchronem Code zu unerwartetem Verhalten führen kann.

Lösung: Nutzen Sie den asynchronen Ansatz

Um diese Einschränkung zu überwinden, ist es notwendig, das Ereignis vollständig zu akzeptieren -getriebener Ansatz von JavaScript. Dazu gehört die Verwendung einer Funktion, die aufgerufen wird, wenn der asynchrone Aufruf abgeschlossen ist. Die Schleife kann dann mit der Ausführung fortfahren, nachdem der Rückruf aufgerufen wurde.

Einführung in die asyncLoop-Funktion

Eine Hilfsfunktion namens asyncLoop kann erstellt werden, um dieses asynchrone Schleifenverhalten zu erleichtern. Es werden drei Parameter benötigt:

• iterations: Die Häufigkeit, mit der die Schleife ausgeführt werden soll.
• func: Die Funktion, die in jeder Iteration ausgeführt werden soll.
• callback: Die Funktion, die aufgerufen wird, wenn die Schleife abgeschlossen ist.

Die asyncLoop-Funktion verwaltet einen internen Variablenindex, um die aktuelle Iteration zu verfolgen, und markiert eine Fertigvariable, um anzuzeigen, wann die Schleife abgeschlossen ist. Innerhalb der Funktion gibt es ein internes Schleifenobjekt, das die folgenden Methoden bereitstellt:

• next(): Bringt die Schleife um eine Iteration voran.
• iteration(): Gibt die aktuelle Iteration zurück.
• break(): Beendet die Schleife vorzeitig.

Um die Schleife zu starten, wird loop.next() aufgerufen. Jedes Mal, wenn die Funktion func aufgerufen wird, kann sie loop.next() aufrufen, um die Schleife fortzusetzen, oder loop.break() aufrufen, um sie zu beenden.

Beispielverwendung:

Das folgende Beispiel zeigt, wie Sie mit der asyncLoop-Funktion eine asynchrone Schleife erstellen:

asyncLoop(10, (loop) => {
  someFunction(1, 2, (result) => {
    console.log(loop.iteration());
    loop.next();
  });
}, () => {
  console.log('cycle ended');
});

Dieser Code führt eine Funktion zehnmal asynchron aus und protokolliert die Iterationsnummer in der Konsole. Die Meldung „Zyklus beendet“ wird gedruckt, wenn die Schleife abgeschlossen ist.

Mit diesem Ansatz können JavaScript-Entwickler asynchrone Schleifen erstellen, die nahtlos in der ereignisgesteuerten Umgebung funktionieren und potenzielle Probleme durch das Blockieren des Skripts und des Browsers vermeiden.