Temporizzazioni Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Comparso su HTML.it il 10 Luglio 2002 - E' vietata la riproduzione, anche parziale, senza esplicito consenso dell'autore

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 language="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>
Andiamo ad analizzare la sintassi che abbiamo utilizzato per richiamare il metodo setTimeout().

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:
with (document)
{
   write("Il download partirà tra 10 secondi, ");
   write("se non parte <a href='http://www.server.com/directory/file.zip'>clicca qui</a>");
}
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 .htm a .zip.

Per maggior chiarezza ecco un esempio:
<script language="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'intermprete 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 in questo modo:
<body onLoad="window.setTimeout('alert()', 10000)">
utilizzando in questo caso i singoli apici per non confondere l'interprete Javascript nella lettura della stringa di testo.

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.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.930)

:: Breve guida a jQuery (98.633)

:: Le espressioni regolari in Javascript (84.992)

:: Gestione delle stringhe in Javascript (74.991)

:: Stampare una pagina col Dhtml (42.852)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.672)

:: Menu orizzontale dinamico in Dhtml (37.191)

:: Gli Array in Javascript (35.938)

:: Istruzion condizionali in Javascript: if e switch (28.947)

:: DOM: rendere cross-browser il comando innerHTML (28.106)

IN EVIDENZA
DOWNLOAD