Descriere: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.
Download:
Autor:
Sursa (Link-ul oficial): Propria parere:Nu l-am incercat.
Tutorialul:
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.
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
Cod: Selectaţi tot
<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>Cod: Selectaţi tot
<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>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
Cod: Selectaţi tot
<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; // 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> Lucrurile cu aceste functii se pot complica atunci cand functiile ce trebuie apelate au mai multi parametri.
- Trebuie tinut cont de tipul parametrului, daca e sir (string) trebuie pus la apelare intre ghilimele, iar daca e un numar (integer) fara ghilimele.
- De asemenea trebuie tinut cont ca functia e apelata ca adaugata intr-un sir, astfel, variabilele folosite pentru argumente se adauga prin concatenare (cu "+") la sirul cu functia apelata.
Cateva exemple:
1. Apelare functie cu 2 argumente: un sir si un numar.
Cod: Selectaţi tot
setTimeout('functie("un_sir", 89)', 2000);Cod: Selectaţi tot
setInterval('functie("un_sir", '+ nr_var +')', 2000);Cod: Selectaţi tot
setInterval('functie('+ nr_var +', "'+ sir_var +'")', 2000);Cod: Selectaţi tot
<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>- Astfel, aceasta apelare cu "setTimeout" poate fi facuta si astfel (cand se transmit valori cunoscute):
setTimeout("set_alert('Tutoriale JavaScript', 8)", 2000);[/b]
