La precisa temporizzazione degli eventi sulle pagine web le trasforma da documenti statici a vere applicazioni multimediali.
Un esempio classico e allo stesso tempo esaustivo è la realizzazione di un orologio javascript che utilizzi dei cicli di temporizzazione.

L’istruzione necessaria a temporizzare una funzione è:

var timeout = setTimeout('funzione();',1000);

Mentre per interrompere un ciclo di temporizzazioni la funzione è:

clearTimeout(timeout);

Vediamo ora il codice necessario alla realizzazione di un orologio:

var timeout;

function ScriviOra(){
     // Istanzio l'oggetto Date e ricavo ora, minuti e secondi
     var oggi = new Date();
     var ore = oggi.getHours();
     var minuti = oggi.getMinutes();
     var secondi = oggi.getSeconds();

     // Formatto minuti e secondi su due cifre
     minuti = Formatta(minuti);
     secondi = Formatta(secondi);

     // Scrivo la stringa contenente l'orario in un campo di tipo input
     var orario = ore + ":" + minuti + ":" + secondi;
     document.getElementById('time').value=orario;

     // Ripeto la funzione dopo un secondo
     timeout = setTimeout('ScriviOra();', 1000);
}

// Funzione necessaria a formattare l'orario
function Formatta(valore){
     if(valore < 10){
          return "0"+valore;
     }
     return valore;
}

// La funzione necessaria ad interrompere l'orologio
function FermaOra(){
     clearTimeout(timeout);
}

Visto il codice javascript è ora necessario creare il campo di input che conterrà l’orario e due bottoni, uno per inizializzare l’orologio e uno per interromperlo:

<input type='text' id='time' size='8' readonly/>
<br/>
<input type='button' value='Start orologio' onClick='ScriviOra();'/>
<input type='button' value='Stop orologio' onclick='FermaOra();'/>

Il cuore dello script è la funzione ScriviOra(). Ogni secondo la funzione determina l’ora corrente, la formatta e la inserisce nel campo di testo e imposta un timeout per eseguire ScriviOra() un secondo dopo.
Da notare come lo script inizi dichiarando la variabile che conterrà i timeout.
Infine la funzione FermaOra() ha il compito di annullare l’ultimo timeout impostato, l’effetto sarà quello di veder fermo l’orario all’ultima esecuzione della funzione ScriviOra().

Cliccando qui è possibile vedere in esecuzione il codice completo