Il metodo setTimeout funziona in modo molto simile a setInterval. La differenza è che in questo caso la funzione indicata viene chiamata solo una volta allo scadere del tempo di ritardo indicato:
o in modo equivalente, senza indicare window:
Nel caso in cui si voglia azzerare un timer precedentemente avviato con setTimeout, bisogna memorizzare il timer in una variabile e quindi usare il metodo clearTimeout, in modo perfettamente analogo a quanto visto con setInterval e clearInterval:
....
clearTimeout(x);
La setTimeout ha come scopo quello di introdurre un ritardo fra l'esecuzione di due eventi. Tuttavia, come vedremo fra un attimo, può anche essere usata per ripetere più volte l'esecuzione di un evento (in modo simile alla setInterval).
Sebbene JS preveda un'apposita funzione setInterval per gli eventi che devono ripetersi più volte a intervalli di tempo fissi, è possibile anche ripetere un evento usando la setTimeout per richiamare ricorsivamente una stessa funzione. Si consideri l'esempio qui sotto, che mostra una realizzazione alternativa dell'orologio visto nella precedente lezione:
{
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('orologio').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i)
{
if (i < 10)
{
i = "0" + i
};
}
In questo caso la funzione startTime (avviata al caricamento della pagina) chiama al proprio interno la setTimeout, la quale a sua volta chiama la funzione startTime in modo ricorsivo.
Si noti che c'è una piccola differenza fra l'uso di setInteval e di setTimeout, come nell'esempio sopra. Infatti setInterval chiama la funzione allo scadere di ogni intervallo indicato, indipendentemente dal tempo impiegato per l'esecuzione della funzione stessa. Se il tempo di esecuzione della funzione è inferiore all'intervallo di ritardo, ciò non crea nessun problema.
Se però l'intervallo è minore del tempo di esecuzione della funzione chiamata, allo scadere dell'intervallo la funzione precedente risulterà ancora in esecuzione. Il JS non esegue immediatamente la funzione, ma aspetta che la precedente sia completata (la mette in coda). Questo provoca un ritardo nei tempi effettivi di esecuzione della funzione, come mostrato in figura:
Invece setTimeout chiama la funzione solo dopo che il codice della precedente è stato eseguito. In sostanza setTimeout ripete la chiamata un po' dopo il tempo prefissato (quanto dopo, dipende dal tempo impiegato per eseguire la funzione).
Per funzioni che vengono eseguite in tempi brevi (minori della durata dell'intervallo) in pratica non c'è nessuna differenza. Se invece le funzioni durano più tempo dell'intervallo, l'uso di setInterval può provocare un accumulo di funzioni in coda per essere eseguite e quindi appesantire e rallentare il funzionamento del browser.
Sito realizzato in base al template offerto da
http://www.graphixmania.it
