In questo articolo tratteremo delle basi necessarie per usare i timer in JavaScript. I timer sono delle procedure che JavaScript usa per eseguire un'azione dopo un certo periodo di tempo o ripeterla nel tempo.
Le funzioni setTimeout() e setInterval()
JavaScript gestisce i timer tramite le funzioni globali setTimeout() e setInterval(). Per globali si intende che queste funzioni sono direttamente parte dell'oggetto globale window. La loro sintassi è la seguente:
setTimeout(funzione, tempo); setInterval(funzione, tempo);
dove funzione è la routine da eseguire e tempo è il numero di millisecondi che devono trascorrere tra un esecuzione e l'altra o il numero di millisecondi che l'interprete JavaScript deve attendere prima di eseguire il codice. In questo sistema 1 secondo equivale quindi a 1000 millisecondi (e così via).
setTimeout() aspetta il tempo richiesto, esegue il codice e quindi si ferma, mentre setInterval() fa lo stesso ma entra in un ciclo continuo di attesa / esecuzione.
Facciamo un esempio: si supponga di voler cambiare il colore di sfondo di un elemento HTML e poi di riportarlo al colore di partenza. Si sarebbe tentati di usare setTimeout() in questo modo:
window.onload = function() {
var test = document.getElementById('test');
setTimeout(function() {
test.style.backgroundColor = 'red';
test.style.backgroundColor = 'orange';
}, 2000);
};
Tuttavia il risultato non è quello sperato, perchè il cambiamento è così repentino nel browser da non far apprezzare l'effetto. Occorre quindi dividere il nostro timer in due fasi:
- attesa, primo colore
- attesa, secondo colore
Ecco quindi come verrebbe il nostro codice:
window.onload = function() {
var test = document.getElementById('test');
setTimeout(function() {
test.style.backgroundColor = 'red';
setTimeout(function() {
test.style.backgroundColor = 'orange';
}, 1000);
}, 1000);
};
E esempio non disponibile è il risultato. Come si può notare, dato che il nostro precedente tempo di attesa era di 2 secondi (2000 millisecondi), ora abbiamo dimezzato i tempi usando due chiamate alla funzione setTimeout() di 1 secondo ciascuna.
Al contrario, setInterval() entra in un ciclo continuo. Supponiamo di voler tenere traccia dei secondi trascorsi dall'avvio del timer inserendo una numerazione progressiva in un elemento (1, 2, 3 e così via). Ecco come potremo fare usando setInterval():
window.onload = function() {
var test = document.getElementById('test');
var counter = 0;
setInterval(function() {
counter += 1;
test.innerHTML += counter.toString() + ' ';
}, 1000);
};
Il problema ora è uno solo: fermare il timer e impedirgli di andare avanti all'infinito. Fortunatamente, JavaScript fornisce altre due funzioni globali per lo scopo: clearTimeout() e clearInterval().
Le funzioni clearTimeout() e clearInterval()
Come dice il loro nome, queste funzioni si applicano rispettivamente ai timer creati con setTimeout() e setInterval(). La loro sintassi è:
clearTimeout(riferimento al timer); clearInterval(riferimento al timer);
Il riferimento al timer non è altro che una variabile che contiene la funzione usata per creare il timer (setTimeout() o setInterval()). Come avrete notato, in precedenza abbiamo creato i timer usando direttamente le funzioni corrispondenti, ossia:
setTimeout(function() {...}, 1000);
Per creare un riferimento, dobbiamo invece scrivere:
var timer = setTimeout(function() {...}, 1000);
E quindi possiamo bloccare il timer usando questo riferimento:
clearTimeout(timer);
Riprendiamo l'esempio del contatore visto in precedenza. Diciamo che adesso vogliamo bloccare il timer quando il contatore è arrivato a dieci, ossia dopo che sono passati dieci secondi. Ecco come fare:
window.onload = function() {
var test = document.getElementById('test');
var counter = 0;
var interval = setInterval(function() {
counter += 1;
test.innerHTML += counter.toString() + ' ';
if(counter == 10) {
clearInterval(interval);
}
}, 1000);
};
Una semplice if-clause ci permette di verificare se il contatore ha raggiunto quota 10. Se si, blocchiamo il timer chiamando clearInterval() e usando il riferimento creato in precedenza (ossia la variabile interval). E esempio non disponibile è il risultato.
Applicazioni dei timer
I timer trovano un'immediata applicazione pratica nelle animazioni. Un uso più avanzato concerne il debugging di applicazioni AJAX, dove per esempio possiamo misurare il tempo trascorso tra una richiesta e l'altra o monitorare le prestazioni dell'applicazione.