Časové události JavaScriptu
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript lze spouštět v časových intervalech. Tomu se říká načasování událostí. |
Časové události
Objekt windowumožňuje provádění kódu v určených časových intervalech.
Tyto časové intervaly se nazývají časové události.
Dva klíčové způsoby použití s JavaScriptem jsou:
setTimeout(function, milliseconds)
Po uplynutí zadaného počtu milisekund provede funkci.setInterval(function, milliseconds)
Stejné jako setTimeout(), ale nepřetržitě opakuje provádění funkce.
A setTimeout()jsou setInterval()obě metody objektu HTML DOM Window.
Metoda setTimeout().
window.setTimeout(function, milliseconds);
Metodu window.setTimeout()lze napsat bez prefixu okna.
První parametr je funkce, která se má provést.
Druhý parametr udává počet milisekund před spuštěním.
Příklad
Klikněte na tlačítko. Počkejte 3 sekundy a stránka vás upozorní „Ahoj“:
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Jak zastavit exekuci?
Metoda clearTimeout()zastaví provádění funkce zadané v setTimeout().
window.clearTimeout(timeoutVariable)
Metodu window.clearTimeout()lze napsat bez prefixu okna.
Metoda clearTimeout()používá proměnnou vrácenou z setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Pokud funkce ještě nebyla provedena, můžete její provádění zastavit voláním clearTimeout()
metody:
Příklad
Stejný příklad jako výše, ale s přidaným tlačítkem "Stop":
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Metoda setInterval().
Metoda setInterval()opakuje danou funkci v každém daném časovém intervalu.
window.setInterval(function, milliseconds);
Metodu window.setInterval()lze napsat bez prefixu okna.
Prvním parametrem je funkce, která se má provést.
Druhý parametr udává délku časového intervalu mezi každým provedením.
Tento příklad spustí funkci nazvanou „myTimer“ jednou za sekundu (jako digitální hodinky).
Příklad
Zobrazit aktuální čas:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Jedna sekunda má 1000 milisekund.
Jak zastavit exekuci?
Metoda clearInterval()zastaví provádění funkce zadané v metodě setInterval().
window.clearInterval(timerVariable)
Metodu window.clearInterval()lze napsat bez prefixu okna.
Metoda clearInterval()používá proměnnou vrácenou z setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Příklad
Stejný příklad jako výše, ale přidali jsme tlačítko „Čas zastavení“:
<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>