JavaScript tajmeri

TAJMERI

Postoje dogadjaji koji nisu direktno inicirani korisnickim akcijama, vec su definisani u odnosu na neki vremenski interval. Na primer, zelite slideshow u kome ce se na svakih 5 sekundi menjati slika. Ili zelite da, nakon sto se document ucita I protekne 5 sekundi, iskoci popup prozor sa reklamom.

Postoji dosta komandi koje se bave ovom vrstom dogadjaja ali su nama od znacaja dve:

setTimeout – izvrsava kod odredjene funkcije nakon isteka vremena koje definisemo. Na primer:

 

function reklama(){

alert(‘Ovo je reklama’);

}

setTimeout(reklama,5000);

 

Ovaj kod ce se izvrsiti 5 sekundi (5000 jer komanda prihvata milisekunde) nakon ucitavanja dokumenta, tj. 5 sekundi nakon ucitavanja stranice iskocice prozor sa porukom Ovo je reklama.

 

setInterval –je dogadjaj koji se ponavlja u odredjenom vremenskom interval, slicno izvrsavanju petlje sa definisanim kasnjenjem. Pogledacemo primer u kome zelimo da kreiramo slideshow, tj. zelimo da se na jednom mestu unutar dokumenta slike dinamicki menjaju na svakih 5 sekundi. HTML kod nad kojim se ovo izvrsava je slika:

<!DOCTYPE html>

<head>

<title></title>

</head>

<body>

<img src=”images/slika1.png” id=”slika”>

<script>

var slika= document.getElementById(‘slika’);

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

i=0;}

}

setInterval(promeni,’5000′);

</script>

 

</body>

</html>

 

Hajde da objasnimo kod. Pocnimo od prvog reda:

 

<img src=”images/slika1.png” id=”slika”>

Ovde postavljamo prvu sliku koja ce se prikazati pri ucitavanju dokumenta.

 

Zatim kreiramo pointer ka img nodu koji nam treba.

var slika= document.getElementById(‘slika’);

 

Zatim definisemo niz sa elementima koji predstavljaju putanje ka ostalim slikama koje ce se prikazivati. Ovde treba primetiti da je poslednji clan niza slika1 koja se pojavljuje na pocetku. Bez toga, slik1 bi se samo prikazala jednom, pri ucitavanju strane a kasnije bi bila izostavljena.

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

 

Sada postavljamo brojac na nulu. Brojac cemo koristiti za pozivanje sledeceg elementa niza sve_slike.

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

i=0;}

}

setInterval(promeni,’5000′);

</script>

U funkciji promeni() u prvom redu setujemo atribut src nultom clanu niza, tj slici slika2.png. I odmah zatim ga povecavamo za 1. Pre kraja funkcije, svaki put ispitujemo da li je brojac manji od broja elemenata niza. Broj elemenata niza dobijamo sa sve_slike.length. Ako jeste dostigao poslednji clan niza, setuj I na nulu, tj. prikazi ponovo prvu sliku.

 

Na kraju, najbitniji deo je samo pozivanje funkcije na svakih 5 sekundi:

setInterval(promeni,’5000′);

 

 

 

clearInterval, clearTimeout

Ove dve komande su pandam komande prethodno navedenim (setInterval I setTimeout). To su komande koje iniciraju prekidanje prethodno kreiranih dogadjaja. Kljucno kod obe komande je staviti red u kome se definise timeout I interval u promenljivu (pointer) kako bi se znalo na koji od njih se prekid odnosi.

 

clearTimeout – obustavlja izvrsenje setTimeout funkcije pre nego se ista izvrsi.

 

function reklama(){

alert(‘Ovo je reklama’);

}

var iskoci = setTimeout(reklama,5000);

 

 

if(neki_uslov_ispunjen){ clearTimeout(iskoci);}

 

Poslednji red prouzrokovace da se promenljiva iskoci, tj. komanda setTimeout nikada ne izvrsi. Naravno, ovo ima smisla ako je prethodno ispunjen neki uslov pa je stavljamo unutar if iskaza.

 

clearInterval – obustavlja izvrsavanje setInterval komande ukoliko dodje do ispunjenja nekog uslova. Ako uzmemo primer u kome smo kreirali slideshow, uslov za stopiranje daljeg izvrsenja bi mogao da bude klik korisnika na sliku.

Zbog preglednosti iskopiracemo ceo primer I ubaciti dodatni kod za zaustavljanje:

 

<!DOCTYPE html>

<head>

<title></title>

</head>

<body>

<img src=”images/slika1.png” id=”slika”>

<script>

var slika= document.getElementById(‘slika’);

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

i=0;}

}

 

var slideshow = setInterval(promeni,’5000′);

slika.onclick = function(){

clearInterval(slideshow);

};

 

</script>

 

</body>

</html>

 

Ako pogledamo kod:

var slideshow = setInterval(promeni,’5000′);

slika.onclick = function(){

clearInterval(slideshow);

};

 

Videcemo da smo setInterval stavili u promenljivu kako bi mogli da manipulisemo tim izrazom. Dalje smo definisali da ako korisnik klikne unutar elementa slika, setInterval izraz prestane sa izvrsavanjem.

NAPOMENA: Ne zaboravite da ceo kod stavite unutar window.onload izraza.

 

Kompletan kod sada izgleda:

 

<!DOCTYPE html>

<head>

<title></title>

</head>

<body>

<img src=”images/slika1.png” id=”slika”>

<script>

window.onload = function(){

var slika= document.getElementById(‘slika’);

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

 

i=0;}

}

 

var slideshow = setInterval(promeni,’5000′);

slika.onclick = function(){

clearInterval(slideshow);

};

}

 

</script>

</body>

</html>

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn