Zdarzenia czasowe JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript może być wykonywany w odstępach czasu. Nazywa się to zdarzeniami czasowymi. |
Wydarzenia czasowe
Obiekt windowumożliwia wykonanie kodu w określonych odstępach czasu.
Te przedziały czasowe nazywane są zdarzeniami czasowymi.
Dwie kluczowe metody używane z JavaScriptem to:
setTimeout(function, milliseconds)
Wykonuje funkcję po odczekaniu określonej liczby milisekund.setInterval(function, milliseconds)
To samo co setTimeout(), ale powtarza wykonywanie funkcji w sposób ciągły.
Obie setTimeout()są setInterval()metodami obiektu HTML DOM Window.
Metoda setTimeout()
window.setTimeout(function, milliseconds);
Metodę window.setTimeout()można napisać bez prefiksu okna.
Pierwszy parametr to funkcja do wykonania.
Drugi parametr wskazuje liczbę milisekund przed wykonaniem.
Przykład
Kliknij przycisk. Poczekaj 3 sekundy, a strona wyświetli komunikat „Hello”:
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Jak zatrzymać egzekucję?
Metoda clearTimeout()zatrzymuje wykonanie funkcji określonej w setTimeout().
window.clearTimeout(timeoutVariable)
Metodę window.clearTimeout()można napisać bez prefiksu okna.
Metoda clearTimeout()wykorzystuje zmienną zwróconą z setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Jeżeli funkcja nie została jeszcze wykonana, możesz zatrzymać jej wykonanie wywołując clearTimeout()
metodę:
Przykład
Taki sam przykład jak powyżej, ale z dodanym przyciskiem „Stop”:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Metoda setInterval()
Metoda setInterval()powtarza daną funkcję w każdym zadanym przedziale czasu.
window.setInterval(function, milliseconds);
Metodę window.setInterval()można napisać bez prefiksu okna.
Pierwszym parametrem jest funkcja do wykonania.
Drugi parametr wskazuje długość odstępu czasu między każdym wykonaniem.
Ten przykład wykonuje funkcję o nazwie „myTimer” raz na sekundę (jak zegarek cyfrowy).
Przykład
Wyświetl aktualny czas:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
W jednej sekundzie jest 1000 milisekund.
Jak zatrzymać egzekucję?
Metoda clearInterval()zatrzymuje wykonanie funkcji określonej w metodzie setInterval().
window.clearInterval(timerVariable)
Metodę window.clearInterval()można napisać bez prefiksu okna.
Metoda clearInterval()wykorzystuje zmienną zwróconą z setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Przykład
Taki sam przykład jak powyżej, ale dodaliśmy przycisk „Zatrzymaj czas”:
<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>