R8X-VIBE



 
AcasaPortalCautareMembriInregistrareConectare

Distribuiţi | 
 

 setTimeout si setInterval

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
Digitalboy
ADMINISTRATOR
ADMINISTRATOR
avatar

Mesaje : 1394
Data de inscriere : 11/03/2010

MesajSubiect: setTimeout si setInterval   Mier Noi 10, 2010 4:21 pm

Aceste două funcții JavaScript, setTimeout() și setInterval() sunt des utilizate, fiind necesare mai ales în script-uri pentru efecte de mișcare, lucru cu perioade de timp și altele.
Ce fac setTimeout() și setInterval()? Acestea pot determina execuția unei funcții la un anumit interval de timp.
Sintaxa (forma) generală de utilizare a lor este următoarea:
setTimeout("functie()", timp)
respectiv
setInterval("functie()", timp)
- Unde, "funcție()" este funcția care va fi apelată, iar "timp" este un număr ce reprezintă intervalul de timp (în miimi de secundă) la care va fi apelată funcția.
Deși pot părea asemănătoare, diferența dintre ele este destul de importantă.
setTimeout - determină executarea funcției după un anumit timp.
setInterval - execută funcția incontinuu, în mod repetat, la un anumit interval de timp.
- Doar "setInterval" apelează funcția în mod repetat. "setTimeout" o apelează o singură dată, după ce trece timpul menționat ca parametru, dar dacă "setTimeout" este inclus în funcția pe care el însusi o execută se produce efectul de autoapelare și determină execuția funcției încontinuu.
Iată două exemple simple cu aceeași funcție, dar apelată în primul cu "setTimeout() iar în al doilea cu "setInterval()". Funcția incrementează cu 1 o variabilă și afișează valoarea ei într-un tag HTML.
1. Cu setTimeout

Cod:
<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
// Adauga valoarea lui nr in tag-ul cu id="id_tag"
    document.getElementById('id_tag').innerHTML = nr;
}

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

2. Cu setInterval

Cod:
<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
// Adauga valoarea lui nr in tag-ul cu id="id_tag"
    document.getElementById('id_tag').innerHTML = nr;
}

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

- Vedeți diferența dintre rezultatele celor două exemple. In primul, cu "setTimeout()" funcția este executată o singură dată, după 2 secunde, iar în al doilea, cu "setInterval()", funcția este apelată tot dupa 2 secunde, dar apelarea continuă și se repetă la fiecare 2 secunde, incrementând și afișând mereu variabila "nr".
Pentru a obține efectul de executare continuă a funcției cu "setTimeout", se adaugă acesta și în interiorul funcției, și astfel, când e apelată prima data funcția, va fi executat și "setTimeout()" din ea, care iar apeleaza funcția, și tot așa până când autoapelarea este oprită de o altă comandă, după cum puteți vedea în următorul exemplu, puțin mai complicat deoarece include și posibilitatea de oprire a funcției prin verificarea unei variabile și folosirea unui parametru transmis funcției (explicații mai amănunțite sunt în codul scriptului).

3. Cu setTimeout() - Autoapelare și oprire

Cod:
<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
// Adauga valoarea lui nr in tag-ul cu id="id_tag"
        document.getElementById('id_tag').innerHTML = nr;   

        // 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>

setTimeout și setInterval - Apelarea funcțiilor cu parametri
Lucrurile cu aceste funcții se pot complica atunci când funcțiile ce trebuie apelate au mai mulți parametri.
Trebuie ținut cont de tipul parametrului, dacă e șir (string) trebuie pus la apelare între ghilimele, iar dacă e un număr (integer) fără ghilimele.
De asemenea trebuie ținut cont că funcțiile sunt apelate în cadrul unui șir, după sintaxa:
setTimeout("functie()", timp)
respectiv
setInterval("functie()", timp)

- Dacă parametri sunt niște variabile, trebuie adăugați în interiorul șirului, între acolade, prin concatenare cu operatorul "+", astfel, în cazul apelării cu parametri, sintaxa generală devine:
setTimeout("functie("+parm1+", "+parm2+")", timp)
respectiv
setInterval("functie("+parm1+", "+parm2+")", timp)
Iată un exemplu practic, în care trebuie afișată după 2 sec. o fereastră Alert cu un șir și un număr, care sunt preluate din variabile.

Cod:
<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 șir, concatenarea a fost făcută în așa fel (și cu alte ghilimele, simple) încât la apelare valoarea să fie transmisă ca șir, iar pentru "parm2" care e un număr nu trebuie să fie transmis între alte ghilimele.
- Astfel, această apelare cu "setTimeout" poate fi făcută și astfel (când se transmit valori cunoscute):
setTimeout("set_alert('Tutoriale JavaScript', Cool", 2000);
Sus In jos
Vezi profilul utilizatorului http://r8x-vibe.forumz.ro
 
setTimeout si setInterval
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
R8X-VIBE :: Programare :: JAVA-
Mergi direct la: