Wie implementiert man eine Verzögerung in einer JavaScript-Schleife richtig?

Hinzufügen einer Verzögerung in einer JavaScript-Schleife

In JavaScript kommt es häufig zu Szenarios, in denen eine Verzögerung innerhalb einer Schleife erforderlich ist, um die Ausführungsgeschwindigkeit zu steuern. Die Implementierung dieser Verzögerung kann jedoch schwierig sein.

Ursprünglicher Ansatz und seine Fallstricke

Anfangs wurde der folgende Code verwendet, um eine Verzögerung von 3 Sekunden für jede Iteration der Schleife einzuführen:

alert('hi');

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

Dieser Ansatz konnte jedoch nicht das beabsichtigte Ergebnis erzielen, da die Funktion setTimeout() nicht blockierend ist. Infolgedessen wurde die Schleife schnell ausgeführt und löste in schneller Folge mehrere 3-Sekunden-Timeout-Trigger aus. Dies führte dazu, dass das erste Alarm-Popup („Hallo“) nach 3 Sekunden erschien, gefolgt von einem konstanten Strom von Alarm-Popups („Hallo“) ohne Verzögerung.

Behebung des Verzögerungsproblems

Um dieses Problem anzugehen, wird empfohlen, den folgenden Ansatz zu verwenden:

var i = 1;                  // Set counter to 1

function myLoop() {         // Create loop function
  setTimeout(function() {   // Call 3s setTimeout when loop is called
    console.log('hello');   // Your code here
    i++;                    // Increment counter
    if (i < 10) {           // If counter < 10, call loop function
      myLoop();             // .. again, triggering another 
    }                       // .. setTimeout()
  }, 3000)
}

myLoop();                   // Start the loop

Dieser überarbeitete Ansatz verwendet eine rekursive Funktion, myLoop(), die initiiert bei jedem Aufruf der Funktion ein 3-sekündiges setTimeout(). Durch Erhöhen des Zählers i innerhalb des setTimeout()-Callbacks kann die Funktion die Schleifeniteration nach der Verzögerung fortsetzen. Dadurch wird sichergestellt, dass nachfolgende Iterationen der Schleife die angegebene Zeit warten, bevor sie ausgeführt werden.

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