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:

  1. attesa, primo colore
  2. 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.