La casistica di programmazione prevede in molti casi la realizzazioni di routine legate al tempo. In questo caso per tempo non intendiamo la data o l'orario, ma il trascorrere di un determinato numero di minuti o, come più spesso accade, di secondi dall'inizio dell'esecuzione dello script.
Le funzioni possono agire anche sul ripetersi dello script oppure all'arresto forzato di una routine, creando predeterminati intervalli.
A questo proposito JavaScript ci mette a disposizione tre differenti metodi dell'oggetto window, ovvero setTimeout() per far partire uno script dopo un tempo prestabilito, setInterval() per creare un intervallo di tempo prestabilito in una routine, e clearInterval() per forzare l'arresto di una routine, spesso generata col metodo setInterval().
È possibile utilizzare i tre metodi indipendentemente l'uno dall'altro. Spesso, ad esempio per creare particolari animazioni in Dhtml, capita di dover utilizzare insieme.
Utilizzo del metodo setTimeout()
Questo metodo, come già detto, serve e far partire uno script dopo un tempo prestabilito; per praticità propongo un semplice ed utile esempio che illustra la sintassi e la funzionalità di questo metodo.
Realizziamo una routine che effettua il redirect ad un'altra pagina dopo 10 secondi, mostrando nell'attesa un messaggio che avvisa che il redirect è in corso:
<script type="text/javascript">
<!--
function doRedirect() {
//Genera il link alla pagina che si desidera raggiungere
location.href = "http://www.server.com/directory/file.htm";
}
//Questo è il messaggio di attesa di redirect in corso…
document.write("Redirect in corso… si prega di attendere qualche istante…");
//Fa partire il redirect dopo 10 secondi da quando l'intermprete JavaScript ha rilevato la funzione
window.setTimeout("doRedirect()", 10000);
//-->
</script>Analizziamo la sintassi utilizzata per richiamare setTimeout().
window.setTimeout("funzione()", tempo_in_ms);Richiamiamo il metodo setTimeout() al di fuori della funzione, in modo da lanciarlo al caricamento della pagina, tra parentesi "passiamo" due parametri: il primo è il nome della funzione da eseguire ("doRedirect()"), incluso tra doppi apici e seguito da una virgola di separazione, il secondo (10000) è il tempo, espresso in millisecondi, che deve trascorrere per far partire la routine: per esprimere 10 secondi bisognerà scrivere diecimila (10000), 5 secondi cinquemila (5000), mezzo secondo cinquecento (500) e cosi via.
Lo stesso esempio può tornare utile anche per impostare un download che parta dopo un certo tempo, cosa frequentemente utilizzata da moltissimi siti. Basta cambiare il contenuto del document.write() in questo modo:
document.write("Il download partirà tra 10 secondi, se non parte clicca qui");oppure eliminarlo e scrivere il classico messaggio in un tag HTML, cosa che consiglio vivamente, dato che questo script dovrebbe essere implementato nell'header della pagina, e modificare l'estensione del file da .html a .zip.
Per maggior chiarezza ecco un esempio:
<script type="text/javascript">
<!--
function doDownload()
{
//Genera il link al file zippato da scaricare
location.href = "http://www.server.com/directory/file.zip";
}
// Fa partire il download dopo 10 secondi da quando
// l'interprete JavaScript ha rilevato la funzione
window.setTimeout("doDownload()", 10000);
//-->
</script>
<div>Il download partirà tra 10 secondi, se non parte
<a href='http://www.server.com/directory/file.zip'>clicca qui</a>
</div>Piccoli script, tipo questo volendo, per praticità e chiarezza nel codice possono essere implementati direttamente all'interno del tag <body> in questo modo:
<body onLoad="window.setTimeout('alert('Ciao')', 10000)">utilizzando in questo caso i singoli apici per non confondere l'interprete JavaScript nella lettura della stringa di testo.
Usare le closure
Per maggior compattezza del codice possiamo anche scegliere di impostare una callback come funzione implicita:
var t = setTimeout(function(){alert("Ciao")}, 3000)Utilizzo del metodo setInterval()
A differenza del metodo setTimeout() che dà il via ad una routine dopo un certo numero di secondi o minuti, il metodo setInterval() crea intervalli prestabiliti nell'arco di una routine.
Un esempio che risulterà certamente di semplice comprensione è la simulazione del tag <blink> di Netscape Navigator, che genera un effetto "testo lampeggiante", in modo da rendere possibile quest'animazione anche con Microsoft Internet Explorer:
<script language="javascript">
<!--
function doBlink() {
//Vrifica che il testo sia visibile al caricamento della pagina
if (blink.style.display == "") {
blink.style.display = "None";
}
//Nasconde il testo
else {
blink.style.display = "";
}
}
//Temporizza la funzione doBlink() creando un intervallo di mezzo secondo
x = window.setInterval("doBlink()", 500);
//-->
</script>
<div id="blink">Testo lampeggiante per Microsoft Internet Explorer</div>
Quello che ci interessa capire è come funziona il metodo setInterval(), ma per dovere di chiarezza esploriamo tutto il codice presentato.
Abbiamo utilizzato un'istruzione di tipo if per stabilire che se il testo dell'id di riferimento è visibile. Se il testo è visibile bisognerà nasconderlo per poi mostrarlo di nuovo, stabilendo un intervallo di mezzo secondo con un loop infinito tra una apparizione e una sparizione.
Come è possibile notare, la sintassi di setInterval() è molto simile a quella di setTimeout(), l'unica differenza è che abbiamo utilizzato una variabile, in questo caso x, per richiamare il metodo, cosa che è possibile anche evitare, ma ci tornerà utile per un'eventuale "stop" della routine col metodo clearInterval().
Utilizzo del metodo clearInterval()
Per concludere questa panoramica sulle temporizzazioni in JavaScript, parliamo del metodo clearInterval() che serve a stoppare una routine dinamica, in genere lanciata col metodo setInterval().
Utilizziamo come riferimento l'esempio visto in precedenza ed associamo ad un bottone, o ad un link, una funzione in grado di arrestare forzatamente una routine generata dal metodo clearInterval():
<input type="button" value="Stop" onClick="window.clearInterval(x)">
dove x rappresenta la funzione a cui è associato l'intervallo di tempo per lo svolgimento della routine, in questo caso il lampeggiare del testo.
