Časové události JavaScriptu

Obsah

Zobrazit obsah

JavaScript lze spouštět v časových intervalech.

Tomu se říká načasování událostí.

Časové události

Objekt window umožňuje spouště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(funkce, milisekundy)
Po uplynutí zadaného počtu milisekund provede funkci.
setInterval(funkce, milisekundy)
Stejné jako setTimeout(), ale opakuje provedení funkce nepřetržitě.

setTimeout() a setInterval() jsou obě metody objektu HTML DOM Window.

Metoda setTimeout().

window.setTimeout(function, milliseconds);

Metodu window.setTimeout() lze zapsat 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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

Jak zastavit exekuci?

Metoda clearTimeout() zastaví provádění funkce specifikované v setTimeout().

window.clearTimeout(timeoutVariable)

Metodu window.clearTimeout() lze zapsat bez předpony okna.

Metoda clearTimeout() používá proměnnou vráceno z setTimeout():

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

Pokud funkce ještě nebyla spuštěna, můžete její provádění zastavit voláním clearTimeout() metoda:

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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

Metoda setInterval().

Metoda setInterval() opakuje danou funkci v každém daném časový interval.

window.setInterval(function, milliseconds);

Metodu window.setInterval() lze zapsat 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 z nich provedení.

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();
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

Jedna sekunda trvá 1000 milisekund.

Jak zastavit exekuci?

Metoda clearInterval() zastaví provádění funkce specifikované v metodě setInterval().

window.clearInterval(timerVariable)

Metodu window.clearInterval() lze zapsat bez předpony 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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<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>

</body>
</html>

Další příklady

Další jednoduché načasování

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

Hodiny vytvořené pomocí časové události

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>