JavaScript: Časovni dogodki

Z JavaScriptom je možno programsko kodo izvesti zakasnjeno ali pa ponavlajti njeno izvajanje v določenih časovnih intervalih, kar imenujemo časovni dogodek. Za izvajanje časovnih dogodkov uporabljamo dve metodi objekta window:

Za prekinitev izvajanja časovnih dogodkov uporabimo metodi:

Metoda setInterval()

Metoda setInterval() po določenem številu milisekund izvede funkcijo, zatem pa njeno izvajanje ponavlja v določenem časovnem intervalu. Sintaktični zapis metode (predpono window lahko izpustimo):

Pri tem mora biti prvi parameter JavaScript funkcija, drugi parameter pa je dolžina časovnega intervala ponovitve funkcije v milisekundah.

Primer izpisa trnutnega lokalnega časa:

<p>Prikaz trenutnega časa: <b><span id="cas"></span></b></p>
<script> 
   var tekociCas = setInterval(function(){timer()},1000); 

   function timer() {     
      var t = new Date();     
      document.getElementById("cas").innerHTML = t.toLocaleTimeString(); 
   } 
</script>

Metoda setTimeout()

Z uporabo metode setTimeout() je mogoče zakasnjeno izvesti programsko kodo. V omenjeno metodo posredujemo kodo (funkcijo) in časovno zakasnitev v milisekundah.

Primer, kjer s klikom na gumb sprožimo zamenjavo slike, ki se zgodi po 3 sekundah:

<p>S klikom na gumb sprožimo zamenjavo slike po 3 sekundah.</p>
<button onclick="setTimeout(function(){
   document.getElementById('slika').src=
   'nogometna.png'},3000)">Klikni me!</button>
<br />
<img src="kosarka.png" alt="Žoga" id="slika" />

S klikom na gumb sprožimo zamenjavo slike po 3 skundah.

Klikni me!

Metoda clearInterval()

Z uporabo metode clearInterval() ustavimo izvajanje funkcije določene v metodi setInterval(). Metodo clearInterval() lahko pišemo brez predpone window:

Da lahko uporabimo metodo clearInterval(), moramo uporabiti globalno spremenljivko pri ustvarjanju metode setInterval().

Primer uporabe metode clearInterval():

<p>Prikaz trenutnega časa: <b><span id="cas"></span></b></p>
<button onclick="clearInterval(tekociCas)">Ustavi čas!</button>
<script> 
   var tekociCas = setInterval(function(){timer()},1000); 

   function timer() {     
      var t = new Date();     
      document.getElementById("cas").innerHTML = t.toLocaleTimeString(); 
   } 
</script>

Metoda clearTimeout()

Z uporabo metode clearTimeout() prekinemo čakanje na izvedbo funkcije določene v metodi setTimeout(). Metodo clearTimeout() lahko pišemo brez predpone window:

Da lahko uporabimo metodo clearTimeout(), moramo uporabiti globalno spremenljivko pri ustvarjanju metode setTimeout().

Primer uporabe metode clearTimeout():

<p>S klikom na gumb "Klikni me!" sprožimo zamenjavo slike po 3 sekundah.</p>
<p>S klikom na gumb "Prekini zamenjavo!" prekinemo čakanje na zamenjavo slike.</p>

<button onclick="menjavaSlike = setTimeout(function(){
   document.getElementById('slika').src=
   'nogometna.png'},3000);">Klikni me!</button>
&nbsp;
<button onclick="clearTimeout(menjavaSlike)">Prekini zamenjavo!</button>
<br />
<img src="kosarka.png" alt="Žoga" id="slika" />

S klikom na gumb "Klikni me!" sprožimo zamenjavo slike po 3 sekundah.

S klikom na gumb "Prekini zamenjavo!" prekinemo čakanje na zamenjavo slike.

Klikni me!     Prekini zamenjavo!