JavaScript wird sowohl als clientseitige Programmiersprache als auch als serverseitige Programmiersprache verwendet. Esbietet eine Vielzahl von Methoden, mit denen verschiedene Funktionen problemlos ausgeführt werden können. Das hat es gemacht Es ist eine der beliebtesten Programmiersprachen und wird auch häufig für verschiedene Arten der Produktentwicklung verwendet.SetInterval in JavaScript ist Teil von Timing Events in JavaScript und wird in der folgenden Reihenfolge beschrieben:
Timing-Ereignisse
JavaScript ermöglicht auch die Ausführung von Funktionen sowie Methoden in Bezug auf die Zeit und nicht die Ausführungszeit des Programms. Dies ermöglicht die Ausführung der Funktionen zum angegebenen Zeitpunkt unabhängig vom Zeitpunkt der Ausführung des Programms.
Die beiden wichtigsten Methoden zur Verwendung der Timing-Ereignisse in JavaScript sind:
setTimeout (Funktion, Millisekunde)
Diese Funktion führt die Funktion aus, die als Parameter nur einmal nach der angegebenen Zeit in Millisekunden übergeben wird.
setInterval (Funktion, Millisekunde)
Diese Funktion führt die Funktion ab der Ausführungszeit und nach jedem erreichten Zeitintervall aus. Es wiederholt die Funktionsausführung in jedem Zeitintervall.
Lassen Sie uns nun fortfahren und sehen, wie SetInterval in JavaScript funktioniert.
SetInterval in JavaScript
Der erste Parameter dieser Funktion ist die auszuführende Funktion, und der zweite Parameter gibt das Zeitintervall zwischen jeder Ausführung an.
var myVar = setInterval (myTimer, 1000) -Funktion myTimer () {var d = neues Datum () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Hier erhält document.getElementById das Element von Die ID lautet 'demo' und die Funktion d.toLocaleTimeString () gibt die aktuelle Zeit vom System an.
Daher wird dies alle 1000 Millisekunden wiederholt, was 1 Sekunde entspricht. Somit wird die Funktion wiederholt alle 1 Sekunde ausgeführt und daher wird die Zeit jede Sekunde aktualisiert.
Wie stoppen wir diese Ausführung? Lass es uns herausfinden!
Wie stoppe ich die Ausführung?
Wir können die Ausführung von der Funktion setInterval () mit Hilfe einer anderen Funktion namens clearInterval () stoppen.clearInterval () verwendet die von der Funktion setInterval () zurückgegebene Variable.
Beispielsweise:
myVar = setInterval (Funktion, Millisekunden) clearInterval (myVar)
Unten sehen Sie ein Beispiel, das sowohl setInterval () als auch clearInterval () verwendet. Dies startet eine Uhr und bietet eine Taste zum Stoppen der Uhrzeit.
Unten ist eine Uhr.
Stoppzeit
Klicken Sie auf die Schaltfläche oben, um die Uhrzeit anzuhalten.
var myVar = setInterval (myTimer, 1000) -Funktion myTimer () {var d = neues Datum () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Ausgabe:
ist hadoop leicht zu lernen
Einige weitere Beispiele mit setInterval () und clearInterval ().
Erstellen eines dynamischen Fortschrittsbalkens
#myProgress {Breite: 100% Höhe: 30px Position: relative Hintergrundfarbe: #ddd} #myBar {Hintergrundfarbe: # 4CAF50 Breite: 10px Höhe: 30px Position: absolut}
Click Me-Funktion move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}Ausgabe:
Die anfängliche Ausgabe
Ausgabe nach dem Klicken auf die Schaltfläche 'Click Me'.
Zwischen zwei Hintergründen wechseln
Stop Toggling var myVar = setInterval (setColor, 300) Funktion setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'gelb'? 'pink': 'gelb'} Funktion stopColor () {clearInterval (myVar)}Ausgabe:
Die Farbe würde zwischen Gelb und Rosa umgeschaltet. Die obige Ausgabe erfolgt vor dem Klicken auf die Schaltfläche und die folgende nach dem Klicken auf die Schaltfläche.
Damit sind wir am Ende unseres SetInterval in JavaScript-Artikels angelangt. Ich hoffe, Sie haben verstanden, wie die SetInterval-Methode funktioniert.
Besuche die von Edureka. Mithilfe der Schulung zur Webentwicklungszertifizierung erfahren Sie, wie Sie mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs beeindruckende Websites erstellen und für Amazon Simple Storage Service (S3) bereitstellen.
Hast du eine Frage an uns? Bitte erwähne es im Kommentarbereich dieses Blogs und wir werden uns bei dir melden.