setTimeout si setInterval - Apelare functii cu parametri

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.

- 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

<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 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 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;    // 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 , urmariti dupa 2 secunde, iar pe pt. a opri auto-apelarea.

Aici va apare valoarea adaugata de functia JS


setTimeout si setInterval - Apelare functii cu parametri

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.
setTimeout('functie("un_sir", 89)', 2000);
2. Apelare functie cu 2 argumente: un sir si o valoare numerica intr-o variabila.
setInterval('functie("un_sir", '+ nr_var +')', 2000);
3. Apelare functie cu 2 argumente: un numar si un sir, ambele din variabile.
setInterval('functie('+ nr_var +', "'+ sir_var +'")', 2000);
• 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:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
setTimeout si setInterval

Last accessed pages

  1. Gradele de comparatie: comparative, superlative (14309)
  2. Gramatica limbii engleze - Prezentare Generala (84384)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (41253)
  4. Adjectivul in limba engleza - The adjective (8861)
  5. Articolul din limba engleza - The article (21914)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2563)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (2473)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1562)
  4. Curs HTML gratuit Tutoriale HTML5 (1370)
  5. Creare si editare pagini HTML (1257)