Die Methode
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 -
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 -
Entfernen Sie die Methode „clearInterval()“ aus der Funktion „start()“ des vorherigen Algorithmus.
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!
