JavaScript: Časovni dogodki

JavaScript omogoča izvajanje programske kode z zamikom ali v ponavljajočih se časovnih intervalih. Tak način izvajanja imenujemo časovni dogodki.

Osnovna pravila

• setTimeout() izvede funkcijo enkrat po določenem času.
• setInterval() ponavlja izvajanje funkcije.
• Čas podajamo v milisekundah (1000 ms = 1 s).
• Kot parameter uporabljamo funkcijo, ne niza besedila.

Metoda setInterval()

Metoda setInterval() ponavlja izvajanje funkcije v določenem časovnem intervalu.

setInterval(funkcija, čas);

<p>Prikaz trenutnega časa: <b><span id="cas"></span></b></p>
<script>
const intervalCas = setInterval(function () {
   const t = new Date();
   document.getElementById("cas").textContent = t.toLocaleTimeString();
}, 1000);
</script>

Metoda setTimeout()

Metoda setTimeout() izvede funkcijo enkrat po določenem času.

setTimeout(funkcija, čas);

<p>S klikom sprožimo spremembo slike po 3 sekundah.</p>
<button onclick="zamenjajSliko()">Klikni me!</button>
<br><br>
<img src="../../_slike/kosarka.png" id="slika">

<script>
function zamenjajSliko() {
   setTimeout(function () {
      document.getElementById("slika").src = "../../_slike/nogometna.png";
   }, 3000);
}
</script>

S klikom sprožimo spremembo slike po 3 sekundah.

Klikni me!

Metoda clearInterval()

Metoda clearInterval() ustavi ponavljanje funkcije.

clearInterval(ID_intervala);

<p>Prikaz časa: <b><span id="cas1"></span></b></p>
<button onclick="clearInterval(intervalCas1)">Ustavi čas</button>

<script>
const intervalCas1 = setInterval(function () {
   const t = new Date();
   document.getElementById("cas1").textContent = t.toLocaleTimeString();
}, 1000);
</script>

Metoda clearTimeout()

Metoda clearTimeout() prekine zakasnitev izvajanja.

clearTimeout(ID_timeouta);

<button onclick="zagon()">Začni</button>
<button onclick="prekini()">Prekini</button>
<br><br>
<img src="../../_slike/kosarka.png" id="slika1">

<script>
let timeoutId;

function zagon() {
   timeoutId = setTimeout(function () {
      document.getElementById("slika1").src = "../../_slike/nogometna.png";
   }, 3000);
}

function prekini() {
   clearTimeout(timeoutId);
}
</script>

Začni Prekini

Priporočila

• Za ponavljajoče naloge uporabljaj setInterval(), za enkratne pa setTimeout().
• Identifikator časovnika vedno shrani v spremenljivko.
• Časovnike ustavi, ko niso več potrebni.
• Pri animacijah razmisli o uporabi requestAnimationFrame().

Pogoste napake

• Uporaba nizov namesto funkcij.
• Neustavljanje intervalov.
• Nepravilno shranjevanje identifikatorja časovnika.