Heim > Web-Frontend > js-Tutorial > Wie kann ich eine Verzögerung in eine JavaScript-Schleife einführen?

Wie kann ich eine Verzögerung in eine JavaScript-Schleife einführen?

DDD
Freigeben: 2024-12-18 10:22:11
Original
793 Leute haben es durchsucht

How Can I Introduce a Delay into a JavaScript Loop?

Verzögern einer JavaScript-Schleife

Mit der Funktion setTimeout() ist es möglich, eine Verzögerung in eine JavaScript-Schleife einzuführen. Das Standardverhalten von setTimeout() ist jedoch die sofortige Ausführung. Um eine Verzögerung einzuführen, müssen wir eine rekursive Schleife verwenden.

Eine Möglichkeit, dies zu erreichen, besteht darin, eine for-Schleife zu verwenden und setTimeout() innerhalb der Schleife aufzurufen. Dieser Ansatz stößt jedoch auf ein Problem, da alle setTimeouts sofort geplant werden, was dazu führt, dass mehrere Warnungen gleichzeitig angezeigt werden.

Um dieses Problem zu lösen, müssen wir eine rekursive Funktion verwenden, die sich selbst mit einer Verzögerung aufruft. Der folgende Code demonstriert diesen Ansatz:

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
Nach dem Login kopieren

In diesem Code erstellen wir eine rekursive Funktion namens myLoop(), die ein 3-sekündiges setTimeout() enthält. Innerhalb des Timeouts erhöhen wir den Zähler und prüfen, ob er weniger als 10 beträgt. Wenn ja, rufen wir myLoop() erneut auf und führen so eine Verzögerung zwischen den einzelnen Alarmen ein.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage