setTimeout JavaScript e uso di clearTimeout per timer

setTimeout di JavaScript è un metodo che permette di chiamare una funzione dopo un certo periodo di tempo, espresso in millisecondi.

La sintassi di questo metodo è:

setTimeout(funzione, millisecondi, p1, p2, …), dove sia i millisecondi, sia p1 e p2 sono parametri opzionali.

La funzione, obbligatoria, sarà eseguita dopo che sarà trascorso il tempo indicato in millisecondi, altrimenti dopo 0 secondi, se questo parametro non è specificato. Dunque 0 è il valore di default.

JavaScript non è multi thread ma a thread singolo, cioè può eseguire una sola attività alla volta in un determinato momento.

Il motore JavaScript esegue quindi il codice dall’alto verso il basso, si dice dunque che è sincrono. Attraverso le callback, promises e i metodi come il setTimeout, JavaScript svolge delle attività asincrone.

Il browser web ha come componenti oltre al motore JavaScript anche gli Event Loop, Call Stack e API Web.

Quando utilizziamo setTimeout il motore di JavaScript inserisce nella Call Stack il contesto di esecuzione che esso crea. In questo modo si crea un timer nel componente Web API del nostro browser web. Quando il tempo trascorre la funzione di callback, passata come argomento al metodo setTimeout, viene inserita in una queue (coda).

L’event loop controlla sia lo stack che la coda, rimuove la funzione di callback dalla coda, la pone nello stack e dunque la funzione viene eseguita.

setTimeout JavaScript – Primo esempio

Realizziamo due funzioni citazione e altraCitazione.

La prima è una funzione che contiene il metodo setTimeout che ha come primo parametro una funzione di callback che attiva semplicemente un alert con una famosa citazione del film “The Imitation Game“. Il secondo parametro invece rappresenta il tempo in millisecondi. Quindi la funzione, quando richiamata, partirà dopo 2 secondi.

La seconda funzione invece è una funzione che contiene un altro alert con un’altra citazione, diversa dalla precedente e che non ha termini di tempo.

Ecco dunque il codice completo d’uso del metodo setTimeout in JavaScript:


citazione();
altraCitazione();

function citazione() {
  // parte dopo 2 secondi
  setTimeout (function () {
    alert('Sono le persone che nessuno immagina che possano fare certe cose quelle che fanno cose che nessuno può immaginare!');
  }, 2000);
}

function altraCitazione () {
  alert('Le persone non dicono mai quello che vogliono dire, dicono sempre altro. Eppure si aspettano che tu le capisca ...');
}

Anche se prima è richiamata la funzione citazione, partirà per prima la funzione altraCitazione in quanto non ha restrizioni di tempo.

setTimeout JavaScript e clearTimeout

Creiamo un semplice conteggio che stopperemo con il metodo clearTimeout.

Prepariamo la nostra pagina HTML con questo semplice codice:

  <div id="container">Inizio conteggio:
    <span id="conta"></span>
    <button id="stop" class="btn">stop</button>
  </div>

Dunque utilizzo uno span dove andrò a mettere i numeri progressivi ed un pulsante per fermare il tutto.

Dopo programmo in JavaScript il mio algoritmo.

Inizializziamo la variabile conteggio a 0 e salviamo in una variabile di nome mioTimer il timer creato.

Dentro la funzione di callback incrementeremo la variabile conteggio e poi richiamiamo ricorsivamente il metodo setTimeout in modo da produrre gli incrementi successivi. Diamo il tempo di 1 secondo.

Quando cliccheremo il pulsante stop richiamiamo la funzione stopCount che provvederà a richiamare il metodo clearTimeout sulla variabile mioTimer.

Ecco dunque il codice completo che utilizza i metodi setTimeout e clearTimeout di JavaScript:


var conteggio = 0;
var mioTimer = setTimeout(function timer() {
  document.getElementById("conta").innerHTML = ++conteggio;
  mioTimer = setTimeout(timer, 1000);
}, 1000);

var stop = document.getElementById('stop');
    stop.addEventListener('click',function (){
    stopCount();
});

function stopCount() {
    clearTimeout(mioTimer );
}

Nella prossima lezione parleremo ancora di timer utilizzando il metodo setInterval.

Lezione precedente: esempi sulle funzioni di callback

Lezione successiva: Dom in JavaScript