Web-Frontend
js-Tutorial
Wie kann ich das Intervall der setinterval()-Methode zur Laufzeit mit JavaScript ändern?
Wie kann ich das Intervall der setinterval()-Methode zur Laufzeit mit JavaScript ändern?
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 -
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 );
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.
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>
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 );
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>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen?
Mar 18, 2025 pm 03:17 PM
In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.
Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe?
Apr 04, 2025 pm 05:12 PM
Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...
TypeScript für Anfänger, Teil 2: Grundlegende Datentypen
Mar 19, 2025 am 09:10 AM
Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript
