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):
setInterval("JavaScript funkcija", milisekund);
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>
Prikaz trenutnega časa:
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.
Metoda clearInterval()
Z uporabo metode clearInterval()
ustavimo izvajanje funkcije določene v metodi setInterval()
. Metodo clearInterval()
lahko pišemo brez predpone window
:
clearInterval(spremenljivkaIntervala);
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>
Prikaz trenutnega časa:
Metoda clearTimeout()
Z uporabo metode clearTimeout()
prekinemo čakanje na izvedbo funkcije določene v metodi setTimeout()
. Metodo clearTimeout()
lahko pišemo brez predpone window
:
clearTimeout(spremenljivkaTimeouta);
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>
<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.