JavaScript Timing-Events
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript: Code nach einem festgelegten Zeitintervall ausführen Wir nennen es ein Timing-Event |
JavaScript-Timing-Events
Mithilfe von JavaScript können wir Code nach einem festgelegten Zeitintervall ausführen, statt sofort nach dem Aufruf der Funktion. Wir nennen es ein Timing-Event.
Die Verwendung von Timing-Events in JavaScript ist sehr einfach; die beiden wichtigsten Methoden sind:
- setInterval() - Führt den angegebenen Code kontinuierlich in angegebenen Millisekundenintervallen aus.
- setTimeout() - Führt den angegebenen Code nach einer angegebenen Anzahl von Millisekunden aus.
Hinweis:setInterval() und setTimeout() sind zwei Methoden des HTML-DOM-Window-Objekts.
setInterval()-Methode
setInterval() führt den angegebenen Code kontinuierlich in angegebenen Millisekundenintervallen aus
Syntax
window.setInterval()Die Methode kann ohne das window-Präfix verwendet werden, indem die FunktionsetInterval() direkt verwendet wird。
Der erste Parameter von setInterval() ist eine Funktion.
Der zweite Parameter ist das Intervall in Millisekunden
Hinweis:1000 Millisekunden entsprechen einer Sekunde.
Beispiel
Alle drei Sekunden "hello" als Pop-up anzeigen:
Selbst ausprobieren »
Das Beispiel zeigt, wie die Methode setInterval() verwendet wird; alle drei Sekunden eine Warnmeldung einzublenden ist nicht gut für die Benutzererfahrung.
Das folgende Beispiel zeigt die aktuelle Uhrzeit an. Die Methode setInterval() legt fest, dass der Code jede Sekunde ausgeführt wird, genau wie bei einer Uhr.
Beispiel
Aktuelle Uhrzeit anzeigen
Selbst ausprobieren »
Wie beendet man die Ausführung?
Die Methode clearInterval() wird verwendet, um den von der Methode setInterval() ausgeführten Funktionscode zu stoppen.
Syntax
window.clearInterval()Die Methode kann ohne das window-Präfix verwendet werden, indem direkt die FunktionclearInterval() verwendet wird。
Um die Methode clearInterval() zu verwenden, müssen Sie beim Erstellen der Zeitsteuerungsmethode eine globale Variable verwenden:
Dann können Sie die Methode clearInterval() verwenden, um die Ausführung zu stoppen.
Beispiel
Im folgenden Beispiel haben wir eine Schaltfläche "Stopp" hinzugefügt:
Selbst ausprobieren »
setTimeout()-Methode
Syntax
Die Methode setTimeout() gibt einen Wert zurück. In der obigen Anweisung wird der Wert in einer Variablen namens myVar gespeichert. Wenn Sie dieses setTimeout() abbrechen möchten, können Sie diesen Variablennamen verwenden, um darauf zu verweisen.
Der erste Parameter von setTimeout() ist eine Zeichenkette, die JavaScript-Anweisungen enthält. Diese Anweisung könnte etwas wie "alert('5 seconds!')" sein oder ein Aufruf einer Funktion wie alertMsg.
Der zweite Parameter gibt an, wie viele Millisekunden ab jetzt der erste Parameter ausgeführt wird.
Tipp:1000 Millisekunden entsprechen einer Sekunde.
Beispiel
Warten Sie 3 Sekunden, dann erscheint "Hallo":
Selbst ausprobieren »
Wie beendet man die Ausführung?
Die clearTimeout()-Methode wird verwendet, um zu verhindern, dass der Funktionscode der setTimeout()-Methode ausgeführt wird.
Syntax
window.clearTimeout()Die Methode kann ohne das window-Präfix verwendet werden.
Um die clearTimeout()-Methode zu verwenden, müssen Sie eine globale Variable verwenden, wenn Sie die Timeout-Methode (setTimeout) erstellen:
Wenn die Funktion noch nicht ausgeführt wurde, können Sie die clearTimeout()-Methode verwenden, um zu verhindern, dass der Funktionscode ausgeführt wird.
Beispiel
Unten ist dasselbe Beispiel, aber mit einem hinzugefügten Button "Alarm stoppen":
Selbst ausprobieren »
