Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie löst man mit JavaScript sofort eine setInterval-Schleife aus?

王林
Freigeben: 2023-08-24 16:05:05
nach vorne
2741 Leute haben es durchsucht

Mit der Methode

如何使用 JavaScript 立即触发 setInterval 循环?

setInteral() können wir die Rückruffunktion nach jedem bestimmten Zeitraum kontinuierlich auslösen. Wir können die Callback-Funktion als ersten Parameter übergeben, der nach jedem Zeitraum ausgelöst wird, und den Zeitraum in Millisekunden als zweiten Parameter.

Die Methode

setInterval() ruft die Rückruffunktion nach der ersten bestimmten Anzahl von Millisekunden auf. Das Problem besteht nun darin, dass wir die Callback-Funktion in den ersten 0 Millisekunden sofort aufrufen müssen und sie danach für einen bestimmten Zeitraum kontinuierlich aufrufen müssen.

Beispiel

Im folgenden Beispiel haben wir die Funktion func() erstellt, die die Nachricht aus dem Dokument druckt. Wir haben die Methode setInterval() verwendet, die alle 3000 Millisekunden die Funktion func() aufruft.

<html>
<body>
   <h3> Using the <i> setInteral() </i> method to invoke the particular function continuosly </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      output.innerHTML += "Please wait ...." + "<br>";
      function func() {
         output.innerHTML += "The func() function is invoked!" + "<br>";
      }
      setInterval(func, 3000);
   </script>
</body>
</html>
Nach dem Login kopieren

In der Ausgabe kann der Benutzer beobachten, dass die Methode setInteraval() die Funktion func() zum ersten Mal nach 3000 Millisekunden aufruft.

Benutzer können die Funktion func() zum ersten Mal bei 0 Millisekunden wie folgt aufrufen.

Rufen Sie diese Funktion zum ersten Mal auf und verwenden Sie dann die Methode setInterval()

Bei Verwendung der setInterval()-Methode besteht eine Möglichkeit, die Funktion ohne Verzögerung aufzurufen, darin, die Funktion zum ersten Mal aufzurufen.

Wenn wir diese Funktion zum ersten Mal aufrufen, wird sie bei der 0. Millisekunde ausgeführt. Danach führt die Methode setInterval() die Funktion nach einer bestimmten Zeit kontinuierlich aus.

Grammatik

Wenn der Benutzer die Methode setInterval() zum ersten Mal verwendet, kann die Funktion gemäß der folgenden Syntax sofort aufgerufen werden.

func_name()
setInterval(func_name, 1000);
Nach dem Login kopieren

In der obigen Syntax haben wir die Funktion func_name() zum ersten Mal und dann alle 1000 Millisekunden aufgerufen.

Beispiel

Im folgenden Beispiel verwendet die Funktion func() die Methode setInterval(), um alle 1000 Millisekunden eine Nachricht aufzurufen. Um die Funktion zum ersten Mal ohne Verzögerung aufzurufen, rufen wir zuerst die Funktion auf und rufen sie dann mit der Methode setInteral() auf.

<html>
<body>
   <h3> Invoking the function for the first time and, after that, using the setInteral() method to invoke the particular function continuously. </h3>
   <div id = "output"> </div>
</body>
   <script>
      let output = document.getElementById('output');
      function func() {
         output.innerHTML += "The func() function is invoked!" + "<br>";
      }
      func()
      setInterval(func, 1000);
   </script>
</html>
Nach dem Login kopieren

Erstellen Sie eine sofort aufgerufene Funktion in der setInteral()-Methode

Sobald wir einen Funktionsausdruck erstellen, ruft die sofort aufgerufene Funktion ihn sofort auf. Daher können wir den Ausdruck call-function-immediate verwenden, um die Funktion zum ersten Mal ohne Verzögerung aufzurufen. Wir können auch die Methode setInterval() innerhalb der Funktion verwenden, um die Funktion in einem bestimmten Zeitintervall auszuführen.

Grammatik

Bei Verwendung der setInterval()-Methode können Benutzer den Funktionsausdruck verwenden, der sofort gemäß der folgenden Syntax aufgerufen wird, um die Funktion ohne Verzögerung auszuführen.

(function name() {
   setInterval(name, 3000);
})()
Nach dem Login kopieren

In der obigen Syntax haben wir den Funktionsausdruck in geschweiften Klammern geschrieben und dann die öffnenden und schließenden Klammern geschrieben, um die Funktion sofort aufzurufen.

Beispiel 3

Das folgende Beispiel erstellt eine Testfunktion, die nach jedem Zeitintervall mithilfe der setInterval()-Methode aufgerufen wird. Wir schreiben die Funktion test() als Funktionsausdruck, der sofort aufgerufen wird, und verwenden die Methode setInterval() innerhalb der Funktion, um die Funktion test() alle 3000 Millisekunden aufzurufen.

Wir können die Ausgabe der Testfunktion beobachten, wenn sie zum ersten Mal bei 0 Millisekunden aufgerufen wird und dann alle 3000 Millisekunden, wenn die Webseite aktualisiert wird.

<html>
<body>
   <h3> Using the immediately invoked function expression to invoke the function without delay for the first time while using the setInteral() method </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      (function test() {
         output.innerHTML += "The test() function is invoked!" + "<br>";
         setInterval(test, 3000);
      })()
   </script>
</body>
</html>
Nach dem Login kopieren

Zum ersten Mal lernten Benutzer, wie sie in der setInterval()-Methode verwendete Funktionen ohne Verzögerung aufrufen. Der Benutzer kann die Funktion zum ersten Mal aufrufen oder einen Funktionsausdruck verwenden, der sofort aufgerufen wird.

Es wird empfohlen, die Funktion zum ersten Mal aufzurufen, anstatt einen sofort aufgerufenen Funktionsausdruck zu verwenden, da die Funktion dadurch rekursiv aufgerufen wird. Der Funktionsausdruck, der unmittelbar nach einem bestimmten Zeitintervall aufgerufen wird, ruft die Funktion unendlich oft auf, wenn wir darin die Methode setInterval() verwenden.

Das obige ist der detaillierte Inhalt vonWie löst man mit JavaScript sofort eine setInterval-Schleife aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!