setTimeout() si setInterval()

Aceste doua functii JavaScript, setTimeout() si setInterval() sunt des utilizate, fiind necesare mai ales in script-uri pentru efecte de miscare, lucru cu perioade de timp si altele.
- Ce fac setTimeout() si setInterval()? Acestea pot determina executia unei functii la un anumit intervaal de timp.
Sintaxa (forma) generala de utilizare a lor este urmatoarea:
            setTimeout("functie()", timp)     respectiv     setInterval("functie()", timp)
- Unde, "functie()" este functia care va fi apelata, iar "timp" este un numar ce reprezinta intervalul de timp (in miimi de secunda) la care va fi apelata functia.

Desi pot parea asemanatoare, diferenta dintre ele este destul de importanta.

• setTimeout - determina executarea functiei dupa un anumit timp.
• setInterval - executa functia incontinuu, in mod repetat, la un anumit interval de timp.

- Doar "setInterval" apeleaza functia in mod repetat. "setTimeout" o apeleaza o singura data, dupa ce trece timpul mentionat ca parametru, dar daca "setTimeout" este inclus in functia pe care el insusi o executa se produce efectul de autoapelare si determina executia functiei incontinuu.

Iata doua exemple simple cu aceeasi functie, dar apelata in primul cu "setTimeout() iar in al doilea cu "setInterval()". Functia incrementeaza cu 1 o variabila si afiseaza valoarea ei intr-un tag HTML.

1. Cu setTimeout

<div id="id_tag">Aici va apare valoarea adaugata de functia JS</div>

<script type="text/javascript"><!--
var nr = 0;        // Variabila ce va fi incrementata

// Functia care e apelata
function functie() {
    nr++;         // Incrementeaza var nr cu o unitate
    document.getElementById('id_tag').innerHTML = nr;         // Adauga valoarea lui nr in tag-ul cu id="id_tag"
}

// Apeleaza functia dupa 2 secunde (se trece timpul in miimi de secunde, adica 2000)
setTimeout("functie()", 2000);
//--></script>

- Acest script va avea urmatorul rezultat. Click pe Ex. unu si asteptati 2 secunde.

Aici va apare valoarea adaugata de functia JS

2. Cu setInterval

<div id="id_tag">Aici va apare valoarea adaugata de functia JS</div>

<script type="text/javascript"><!--
var nr = 0;        // Variabila ce va fi incrementata

// Functia care e apelata
function functie() {
    nr++;         // Incrementeaza var nr cu o unitate
    document.getElementById('id_tag').innerHTML = nr;         // Adauga valoarea lui nr in tag-ul cu id="id_tag"
}

// Apeleaza functia, repetat, la interval de 2 secunde (se trece timpul in miimi de secunde, adica 2000)
setInterval("functie()", 2000);
//--></script>

- Acest script va da urmatorul rezultat. Click pe Ex. doi si observati dupa 2 sec.

Aici va apare valoarea adaugata de functia JS

- Vedeti diferenta dintre rezultatele celor doua exemple. In primul, cu "setTimeout()" functia este executata o singura data, dupa 2 secunde, iar in al doilea, cu "setInterval()", functia este apelata tot dupa 2 secunde, dar apelarea continua si se repeta la fiecare 2 secunde, incrementand si afisand mereu variabila "nr".

Pentru a obtine efectul de executare continua a functiei cu "setTimeout", se adauga acesta si in interiorul functiei, si astfel, cand e apelata prima data functia, va fi executat si "setTimeout()" din ea, care iar apeleaza functia, si tot asa pana cand autoapelarea este oprita de o alta comanda, dupa cum puteti vedea in urmatorul exemplu, putin mai complicat deoarece include si posibilitatea de oprire a functiei prin verificarea unei variabile si folosirea unui parametru transmis functiei (explicatii mai amanuntite sunt in codul scriptului).

3. Cu setTimeout() - Autoapelare si oprire

<div id="id_tag">Aici va apare valoarea adaugata de functia JS</div>
Buton de oprire: <button onclick="functie(0)">Stop</button>

<script type="text/javascript"><!--
var nr = 0;         // Variabila ce va fi incrementata
var stp = 1;         // Variabila prin care se controleaza oprirea

// Functia care e apelata
function functie(parm) {
    // Daca parametrul "parm" are valoarea 0 (primita de la butonul "Stop"), seteaza stp=0
    // Determina ne executarea codului din urmatorul "if()", unde e si auto-apelarea
    if(parm==0) { stp = 0; }

    // Codul urmator se executa doar daca stp=1
    if(stp==1) {
        nr++;         // Incrementeaza var nr cu o unitate
        document.getElementById('id_tag').innerHTML = nr;    v // Adauga valoarea lui nr in tag-ul cu id="id_tag"

        // Auto-apeleaza functia dupa 2 secunde (cu parametru 1)
        setTimeout("functie(1)", 2000);
    }
}

// Apeleaza functia dupa 2 secunde (cu parametru 1)
setTimeout("functie(1)", 2000);
//--></script>

- Acest script va afisa urmatorul rezultat. Click pe Ex. trei, urmariti dupa 2 secunde, iar pe Stop pt. a opri auto-apelarea.

Aici va apare valoarea adaugata de functia JS

setTimeout si setInterval - Apelarea functiilor cu parametri

Lucrurile cu aceste functii se pot complica atunci cand functiile ce trebuie apelate au mai multi parametri.
1. Trebuie tinut cont de tipul parametrului, daca e sir (string) trebuie pus la apelare intre ghilimele, iar daca e un numar (integer) fara ghilimele.
2. De asemenea trebuie tinut cont ca functiile sunt apelate in cadrul unui sir, dupa sintaxa:
            setTimeout("functie()", timp)     respectiv     setInterval("functie()", timp)
- Daca parametri sunt niste variabile, trebuie adaugati in interiorul sirului, intre acolade, prin concatenare cu operatorul "+", astfel, in cazul apelarii cu parametri, sintaxa generala devine:
            setTimeout("functie("+parm1+", "+parm2+")", timp)     respectiv
            setInterval("functie("+parm1+", "+parm2+")", timp)

Iata un exemplu practic, in care trebuie afisata dupa 2 sec. o fereastra Alert cu un sir si un numar, care sunt preluate din variabile.

<script type="text/javascript"><!--
// Variabilele ce vor fi transmise functiei
var sir = 'Tutoriale JavaScript';
var nr2 = 8;

function set_alert(parm1, parm2) {
    // Afiseaza fereastra Alert cu parametri primiti
    alert(parm1+' - '+parm2);
}

// Apeleaza functia dupa 2 sec., transferand ca parametri cele 2 variabile
setTimeout("set_alert('"+sir+"', "+nr2+")", 2000);
//--></script>

- Valoarea lui "parm1" fiind un sir, concatenarea a fost facuta in asa fel (si cu alte ghilimele, simple) incat la apelare valoarea sa fie transmisa ca sir, iar pentru "parm2" care e un numar nu trebuie sa fie transmis intre alte ghilimele.
- Astfel, aceasta apelare cu "setTimeout" poate fi facuta si astfel (cand se transmit valori cunoscute):
            setTimeout("set_alert('Tutoriale JavaScript', 8)", 2000);

Ca sa vedeti rezultatul acestui script, click pe butonul: Ex. patru
Curs realizat de MarPlo