Zdarzenia czasowe JavaScript

JavaScript może wykonywać się w określonych odstępach czasu.

To jest tak zwane planowane wydarzenie (Timing Events).

Zdarzenia czasowe

Obiekt window pozwala wykonywać kod w określonych odstępach czasu.

Te odstępy czasowe nazywane są zdarzeniami czasowymi.

Dwa kluczowe metody używane przez JavaScript:

setTimeout(function, milisekundy)
wykonuje funkcję po upływie określonej liczby milisekund.
setInterval(function, milisekundy)
jest równoważna setTimeout(), ale powtarza wykonywanie tej funkcji.

setTimeout() i metoda setInterval() wszystkie te metody należą do obiektu Window DOM HTML.

Metoda setTimeout()

window.setTimeout(function, milisekundy);

window.setTimeout() metoda może być używana bez window z prefiksem.

Pierwszy parametr to funkcja do wykonania.

Drugi parametr wskazuje liczbę milisekund przed wykonaniem.

Przykład

Kliknij przycisk. Czekaj 3 sekundy, a następnie strona wyświetli "Hello":

<button onclick="setTimeout(myFunction, 3000)">Spróbuj</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

Spróbuj sam

Jak zatrzymać wykonanie?

clearTimeout() metoda zatrzymuje wykonanie setTimeout() określonej funkcji.

window.clearTimeout(timeoutVariable)

window.clearTimeout() metoda może być używana bez window z prefiksem.

clearTimeout() używając z setTimeout() Zwracana zmienna:

myVar = setTimeout(function, milisekundy);
clearTimeout(myVar);

Przykład

Podobnie jak w poprzednim przykładzie, ale z dodanym przyciskiem "Zatrzymaj":

<button onclick="myVar = setTimeout(myFunction, 3000)">Spróbuj</button>
<button onclick="clearTimeout(myVar)">Zatrzymaj wykonanie</button>

Spróbuj sam

Metoda setInterval()

metoda setInterval() metoda powtarza określoną funkcję w podanym przedziale czasu.

window.setInterval(function, milisekundy);

window.setInterval() metoda może być używana bez window z prefiksem.

Pierwszy parametr to funkcja do wykonania.

Drugi parametr to długość odstępu między wykonywaniami.

W tym przykładzie funkcja "myTimer" jest wykonywana raz na sekundę (jak zegarek cyfrowy).

Przykład

Wyświetl aktualny czas:

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Spróbuj sam

Jedna sekunda ma 1000 milisekund.

Jak zatrzymać wykonanie?

metoda clearInterval() metoda zatrzymuje się metoda setInterval() wykonanie funkcji określonej w metodzie.

window.clearInterval(timerVariable)

window.clearInterval() może być zapisana bez przedrostka window.

metoda clearInterval() metoda używa: metoda setInterval() Zwracana zmienna:

myVar = setInterval(function, milisekundy);
clearInterval(myVar);

Przykład

Podobnie jak w poprzednim przykładzie, ale dodaliśmy przycisk "Zatrzymaj czas":

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Zatrzymaj czas</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Spróbuj sam

Więcej przykładów

Inny prosty zegar
Zegar utworzony przez czas liczenia