Wie füge ich mit setTimeout() ordnungsgemäß Verzögerungen zu JavaScript-Schleifen hinzu?

So fügen Sie eine Verzögerung in einer JavaScript-Schleife mit Timeouts hinzu

In JavaScript kann das Hinzufügen einer Verzögerung innerhalb einer Schleife mithilfe von setTimeout erreicht werden ()-Funktion. Es ist jedoch wichtig, sein Verhalten zu verstehen, um unerwartete Ergebnisse zu vermeiden.

Betrachten Sie das folgende Beispiel:

alert('hi');

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

Dieser Code zielt darauf ab, eine Warnung mit dem Text „Hallo“ anzuzeigen und dann die anzuzeigen Text „Hallo“ nach einer Verzögerung von 3 Sekunden, wobei sich die Verzögerung für nachfolgende Iterationen wiederholt. In der Praxis funktioniert jedoch nur die erste Iteration wie vorgesehen.

Der Grund für dieses Verhalten liegt in der nicht blockierenden Natur von setTimeout(). Es löst einen Timer aus, kehrt jedoch sofort zurück, sodass die Schleife weiter ausgeführt werden kann, bevor die Verzögerung von 3 Sekunden auftreten kann. Dies führt zu einem sofortigen „Hallo“-Alarm und einer kontinuierlichen Anzeige nachfolgender Alarme ohne Verzögerung.

Um den gewünschten Effekt zu erzielen, kann ein alternativer Ansatz verwendet werden:

var i = 1; // set your counter to 1

function myLoop() { // create a loop function
  setTimeout(function() { // call a 3s setTimeout when the loop is called
    console.log('hello'); // your code here
    i++; // increment the counter
    if (i < 10) { // if the counter < 10, call the loop function
      myLoop(); // .. again which will trigger another 
    } // .. setTimeout()
  }, 3000);
}

myLoop(); // start the loop

Hierbei Bei diesem Ansatz wird innerhalb der Schleife ein Zähler initialisiert und erhöht. Die Schleifenfunktion wird innerhalb von setTimeout() aufgerufen und stellt sicher, dass jede Iteration vor der Ausführung eine eigene Verzögerung von 3 Sekunden hat. Durch die Aufrechterhaltung der Schleife innerhalb des Rückrufs von setTimeout() wird das gewünschte Intervall zwischen den Warnungen erreicht.

Das obige ist der detaillierte Inhalt vonWie füge ich mit setTimeout() ordnungsgemäß Verzögerungen zu JavaScript-Schleifen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!