Parametri intr-o functie chemata cu setTimeout() si setInterval()

In acest articol vom discuta despre o problema la care am gasit surprinzator de putine raspunsuri pe internet. De fapt, unul… 🙂 Despre ce este vorba? Lucram la un proiect unde m-am gasit in situatia de a chema o functie prin intermediul lui setInterval(). *Explicatii despre functie mai jos.

Problema era ca functia apelata prin setInterval() avea nevoie si de cativa parametri. Asta pune ceva mai multe probleme decat am fi crezut.

In mod normal, apelul JavaScript pentru setInterval() ar fi aratat astfel:

setInterval('myFunction()', 5000);

function myFunction() {
	// Do something in the function
}

Deci am crezut ca pentru apelul cu parametri, codul ar trebui sa fie asa:

var param1 = 'First Parameter';
var param2 = 'Second Parameter';
setInterval('myFunction(param1, param2)', 5000);

function myFunction(param1, param2) {
	// Evaluate parameters and work with them
}

Gresit! In functia myFunction(), param1 si param2 vor aparea ca fiind Undefined. Dupa indelungi cercetari am aflat ca metoda corecta pentru acest apel este:

setInterval(function(){myFunction(param1, param2)}, 5000);

Multumrile merg catre Bryan Gullan al carui articol m-a salvat cand incepusem sa-mi pierd rabdarea. Puteti citi explicatia in articolul lui, pentru ca n-are sens sa o mentionez si eu aici.

Cei care stiu deja sa lucreze cu setTimeout() si setInterval(), pot sa se opreasca din citit. Urmeaza sa explicam putin cele doua functii, pentru cei care nu s-au mai intalnit cu ele.

Pe scurt, cele doua, sunt fuctii native JavaScript care se executa dupa un anumit timp setat prin intermediul unui parametru.

Site-ul w3schools.com prezinta cel mai simplu exemplu de setTimeout() ca fiind acesta:

var t=setTimeout("javascript statement",milliseconds);

Se da urmatorul apel:

var t=setTimeout('myFunction()', 5000);

Asta inseamna ca browser-ul va astepta 5 secunde, dupa care va chema functia myFunction().

Care este diferenta dintre setTimeout() si setInterval()? Simplu; setTimeout() asteapta 5 secunde, executa functia si se opreste. In schimb, setInterval() va chema respectiva functie la fiecare 5 secunde.

Pentru cei care vor, setInterval() poate fi emulat cu setTimeout() printr-o functie recursiva, dar eu nu recomand acest lucru decat daca aveti de-a face cu un caz exceptional care impune acest lucru. Cum putem sa facem asta? Pai, un exemplu simplu ar fi urmatorul:

function myFunction() {
	//run some code
	setTimeout('myFunction()', 5000);
}

Astfel, setTimeout() va fi executat de fiecare data la sfarsitul functiei si va relua ciclul, simuland astfel comportamentul lui setInterval().

Cam asta am avut de spus despre setTimeout() si setInterval(). Tineti minte exemplul de mai sus, ca sa nu imbatraniti si voi doi ani in doua ore cand veti avea nevoie sa transmiteti cativa parametrii functiei din setInterval().