JavaScript -Timing-Ereignisse
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript kann in Zeitintervallen ausgeführt werden. Dies wird als Timing-Ereignisse bezeichnet. |
Timing-Ereignisse
Das windowObjekt ermöglicht die Ausführung von Code in bestimmten Zeitintervallen.
Diese Zeitintervalle werden als Timing-Ereignisse bezeichnet.
Die beiden wichtigsten Methoden für die Verwendung mit JavaScript sind:
setTimeout(function, milliseconds)
Führt eine Funktion aus, nachdem eine bestimmte Anzahl von Millisekunden gewartet wurde.setInterval(function, milliseconds)
Wie setTimeout(), wiederholt aber die Ausführung der Funktion kontinuierlich.
Die setTimeout()und setInterval()sind beide Methoden des HTML-DOM-Window-Objekts.
Die setTimeout()-Methode
window.setTimeout(function, milliseconds);
Die window.setTimeout()Methode kann ohne das Fensterpräfix geschrieben werden.
Der erste Parameter ist eine auszuführende Funktion.
Der zweite Parameter gibt die Anzahl der Millisekunden vor der Ausführung an.
Beispiel
Klicken Sie auf eine Schaltfläche. Warten Sie 3 Sekunden, und die Seite meldet „Hallo“:
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Wie stoppe ich die Hinrichtung?
Die clearTimeout()Methode stoppt die Ausführung der in setTimeout() angegebenen Funktion.
window.clearTimeout(timeoutVariable)
Die window.clearTimeout()Methode kann ohne das Fensterpräfix geschrieben werden.
Die clearTimeout()Methode verwendet die Variable, die von zurückgegeben wird setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Wenn die Funktion noch nicht ausgeführt wurde, können Sie die Ausführung stoppen, indem Sie die clearTimeout()
Methode aufrufen:
Beispiel
Dasselbe Beispiel wie oben, aber mit einer zusätzlichen „Stopp“-Schaltfläche:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Die Methode setInterval()
Das setInterval()Verfahren wiederholt eine gegebene Funktion in jedem gegebenen Zeitintervall.
window.setInterval(function, milliseconds);
Die window.setInterval()Methode kann ohne das Fensterpräfix geschrieben werden.
Der erste Parameter ist die auszuführende Funktion.
Der zweite Parameter gibt die Länge des Zeitintervalls zwischen jeder Ausführung an.
Dieses Beispiel führt einmal pro Sekunde eine Funktion namens "myTimer" aus (wie eine Digitaluhr).
Beispiel
Anzeige der aktuellen Uhrzeit:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Eine Sekunde hat 1000 Millisekunden.
Wie stoppe ich die Hinrichtung?
Die clearInterval()Methode stoppt die Ausführungen der in der Methode setInterval() angegebenen Funktion.
window.clearInterval(timerVariable)
Die window.clearInterval()Methode kann ohne das Fensterpräfix geschrieben werden.
Die clearInterval()Methode verwendet die Variable, die von zurückgegeben wird setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Beispiel
Dasselbe Beispiel wie oben, aber wir haben eine Schaltfläche "Zeit stoppen" hinzugefügt:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>