Wie kann ich das Intervall der setinterval()-Methode zur Laufzeit mit JavaScript ändern?-js-Tutorial-php.cn

Wie kann ich das Intervall der setinterval()-Methode zur Laufzeit mit JavaScript ändern?

PHPz

Freigeben： 2023-09-07 23:45:10

nach vorne

1010 Leute haben es durchsucht

Die Methode

如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔？

setInterval() wird verwendet, um einen bestimmten Codeblock nach einem bestimmten Zeitintervall, das als Parameter in Klammern angegeben ist, immer wieder aufzurufen. Die Methode setInterval() akzeptiert zwei Parameter. Der erste Parameter ist der Code, der wiederholt ausgeführt werden muss, und der zweite Parameter ist die Zeit, zu der der Code erneut ausgeführt werden muss.

In diesem Artikel erfahren Sie, wie Sie das Zeitintervall der setInterval()-Methode zur Laufzeit ändern können. Auf diese Weise wird der angegebene Code in unregelmäßigen oder variablen Abständen ausgeführt.

JavaScript stellt uns zwei verschiedene integrierte Methoden zur Verfügung, um das Zeitintervall der setInterval()-Methode wie unten gezeigt zu ändern -

Verwenden Sie die Methode clearInterval().
Verwenden Sie die setTimeout()-Methode.

Lassen Sie uns mehr über das Funktionsprinzip bzw. die Umsetzung dieser beiden Methoden erfahren.

Verwenden Sie die Methode „clearInterval()“

Die Methode „clearInterval()“ wird verwendet, um die zuvor ausgeführte Funktion „setInterval()“ zu löschen oder zu stoppen. Wir können diese Methode verwenden, um das Zeitintervall der Methode seInterval() zu ändern, indem wir diese Funktion innerhalb der an setInterval() übergebenen Funktion aufrufen. Dadurch wird die zuvor aufgerufene Methode setInterval() gelöscht und die neue Methode verwendet, die wir im Code definieren Zeitwert.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie die Methode „clearInterval()“ verwenden, um die vorherige Methode „setInterval()“ zu löschen –

clearInterval( code to be executed, time interval );

Nach dem Login kopieren

Lassen Sie uns diese Methode tatsächlich verstehen und das Timing der setInterval()-Methode mithilfe der clearInterval()-Methode in JavaScript ändern.

Algorithmus

Schritt 1 – Im ersten Schritt fügen wir zwei verschiedene Schaltflächen in das HTML-Dokument ein, eine zum Starten des Intervalls und eine zum Stoppen des Intervalls. < /p>
Schritt 2 – In diesem Schritt erhalten wir alle erforderlichen Elemente aus dem HTML-Dokument mithilfe von IDs in JavaScript, um Änderungen daran vorzunehmen.
Schritt 3 – Im nächsten Schritt definieren wir eine JavaScript-Funktion, bei der wir zuerst das vorherige setInterval() mit der Methode clearInterval() löschen und dann mit einem neuen Wert und erneut mit der Funktion, die wir in diesem Schritt definiert haben, das setInterval aufrufen ()-Methode.
Schritt 4 – Im letzten Schritt definieren wir eine weitere JavaScript-Funktion, um die Ausführung von setInterval() mithilfe der Methode clearInterval() zu stoppen.

Beispiel

Die folgenden Beispiele helfen Ihnen, den obigen Algorithmus tatsächlich zu verstehen, indem Sie sich mit dem Code befassen -

<html>
<body>
   <h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
   <p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
   <button id = "btn" onclick = "start()"> Start Printing </button>
   <button id = "stopbtn" onclick = "stop()"> Stop Printing </button>
   <p id = "print1"> </p>
   <p id = "result"> </p>
   <p id = "print2"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      var printVal1 = document.getElementById("print1");
      var printVal2 = document.getElementById("print2");
      var interval, t = 500;
      function start() {
         printVal1.innerHTML = " Printing Starts: ";
         clearInterval(interval);
         result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
         t = t * 2;
         interval = setInterval(start, t);
      }
      function stop() {
         printVal2.innerHTML = " Printing Ends. ";
         clearInterval(interval);
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel verwenden wir die Methode „clearInterval()“, um das Zeitintervall der Methode „setInterval()“ zur Laufzeit mithilfe von JavaScript zu ändern.

Verwenden Sie die setTimeout()-Methode

Die Methode setTimeout() ähnelt der Methode setInterval(). Es ruft auch einen Codeabschnitt nach einem bestimmten Intervall auf, führt den Code jedoch im Gegensatz zu setInterval() nur einmal aus und nicht immer wieder. Die Methode setTimeout() stoppt automatisch, nachdem der Code einmal ausgeführt wurde. Daher müssen wir die Methode clearInterval() nicht wie die Methode setInterval() aufrufen, um die Ausführung des vorherigen Zeitintervalls zu stoppen.

Grammatik

Verwenden Sie die Methode setTimeout(), um das Zeitintervall gemäß der folgenden Syntax zu ändern -

setTimeout( code to be executed, time interval );

Nach dem Login kopieren

Sehen wir uns nun die tatsächliche Implementierung dieser Methode anhand eines JavaScript-Codebeispiels an.

Algorithmus

Der Algorithmus dieser Methode ist fast der gleiche wie der vorherige. Sie müssen nur einige kleine Änderungen vornehmen, wie unten gezeigt -

Das folgende Beispiel erklärt die praktische Verwendung der setTimeout-Methode und hilft Ihnen, die oben genannten Änderungen im vorherigen Algorithmus zu verstehen, die Sie durchführen müssen -

<html>
<body>
   <h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
   <p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
   <button id = "btn" onclick = "start()">Start Printing</button>
   <button id = "stopbtn" onclick = "stop()">Stop Printing</button>
   <p id = "print1"> </p>
   <p id = "result"> </p>
   <p id = "print2"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      var printVal1 = document.getElementById("print1");
      var printVal2 = document.getElementById("print2");
      var interval, t = 500;
      function start() {
         printVal1.innerHTML = " Printing Starts: ";
         result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
         t = t * 2;
         interval = setTimeout(start, t);
      }
      function stop() {
         printVal2.innerHTML = " Printing Ends. ";
         clearInterval(interval);
      }
   </script>
</body>
</html>

Nach dem Login kopieren

In diesem Beispiel verwenden wir die setTimeout()-Methode von JavaScript, um das Zeitintervall zwischen den einzelnen Aufrufen zur Laufzeit mithilfe von JavaScript zu ändern.

In diesem Artikel haben wir zwei verschiedene Möglichkeiten kennengelernt, das Zeitintervall mithilfe der setInterval()-Methode zu ändern. Wir besprechen beide Ansätze im Detail mit der erforderlichen Theorie und praktischen Umsetzung anhand separater Codebeispiele für jeden Ansatz.

Das obige ist der detaillierte Inhalt vonWie kann ich das Intervall der setinterval()-Methode zur Laufzeit mit JavaScript ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!