INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Temporizzazioni Javascript

Autore: Luca Ruggiero | Tell a Friend
Corso Java
Impara a programmare col linguaggio OOP della Sun.

Corso Javascript e DHTML
Impara a creare controlli ed animazioni!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

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.

TAGS - window settimeout, window setinterval, javascript, dhtml

IN EVIDENZA

Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS

Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb