Wie implementiert man Verzögerungen in JavaScript-Schleifen richtig?

Verzögerungen in JavaScript-Schleifen implementieren

Bei der Arbeit mit Schleifen in JavaScript ist es manchmal notwendig, eine Verzögerung oder Ruhephase einzuführen, um die Ausführung zu steuern fließen. Lassen Sie uns untersuchen, wie Sie dies mit der Funktion setTimeout() erreichen können.

Versuch 1: Verwendung von setTimeout()

Ein gängiger Ansatz besteht darin, setTimeout() zu verwenden, um eine zu erstellen zeitbasierte Verzögerung. Allerdings kann die Platzierung von setTimeout() direkt in einer Schleife zu unerwartetem Verhalten führen. Beispielsweise versucht der folgende Code, jede Iteration um 3 Sekunden zu verzögern:

for (var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

Während dieser Code zunächst nach 3 Sekunden die Meldung „Hallo“ anzeigt, zeigt er sie dann kontinuierlich ohne Verzögerung an. Dies liegt daran, dass setTimeout() nicht blockierend ist und sofort zurückkehrt, sodass die Schleife abgeschlossen werden kann, bevor die Verzögerungszeit abgelaufen ist.

Alternativer Ansatz: Iterative Schleife

Zu Um die gewünschte Verzögerung zu erreichen, können wir eine iterative Schleife mit einem setTimeout()-Aufruf innerhalb einer Funktion verwenden:

var i = 1;

function myLoop() {
  setTimeout(function () {
    console.log('hello');
    i++;
    if (i < 10) {
      myLoop();
    }
  }, 3000);
}

myLoop();

In diesem In diesem Fall wird zunächst die Funktion myLoop() aufgerufen, die den ersten setTimeout()-Trigger einrichtet. Anschließend wird innerhalb des setTimeout()-Rückrufs die Nachricht gedruckt, der Zähler erhöht und wenn der Zähler immer noch kleiner als 10 ist, wird die Funktion myLoop() erneut aufgerufen. Dadurch wird sichergestellt, dass die nächste Iteration der Schleife erst nach Ablauf der 3-Sekunden-Verzögerung ausgelöst wird.

Durch die Verwendung einer iterativen Schleife in Verbindung mit setTimeout() können Sie effektiv Verzögerungen in JavaScript-Schleifen einführen und diese steuern Ausführungsablauf präzise.

Das obige ist der detaillierte Inhalt vonWie implementiert man Verzögerungen in JavaScript-Schleifen richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!