La realizzazione di pagine dinamiche presenta spesso la necessità di gestire problemi di temporizzazione. In sostanza si tratta di eseguire determinate funzioni in corrispondenza di determinati istanti temporali o dopo un certo ritardo. Si pensi per esempio alla realizzazione di un orologio in JS come nell'esempio qui sotto:
Il codice corrispondente è questo:
function startTime()
{
var t = setInterval(Time, 500);
}
function Time()
{
// Crea un oggetto Date
var today = new Date();
// Legge ora, minuti e secondi
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// Formatta i valori numerici
m = checkTime(m);
s = checkTime(s);
// Scrive la data all'interno dell'elemento di id = orologio
document.getElementById('orologio').innerHTML =
h + ":" + m + ":" + s;
}
// Funzione di servizio per formattare i numeri minori di 10
function checkTime(i)
{
if (i < 10) {i = "0" + i}; // aggiunge uno zero davanti ai numeri < 10
return i;
}
La funzione startTime viene chiamata al caricamento della pagina (evento onload sull'elemento body) e serve, come suggerisce il nome, per avviare il timer. Il metodo setInterval è un metodo dell'oggetto window che stabilisce l'esecuzione di una funzione a intervalli di tempo predeterminati (in questo caso ogni 500 millisecondi). Si noti la notazione abbreviata setInterval al posto di window.setInterval.
La funzione Time (chiamata ogni 500 ms - e non ogni 1000 ms - per essere sicuri di aggiornare il calcolo dei secondi in sincronia con l'orologio del PC) usa alcuni metodi dell'oggetto Date per ricavare l'ora, i minuti e i secondi dall'orologio interno del PC e per visualizzarli all'interno di un elemento <div> con identificatore id="orologio".
Il metodo setInterval visto nell'esempio precedente ha una sintassi piuttosto semplice:
ovvero in notazione abbreviata (omettendo il primo oggetto della catena):
Il metodo attiva la funzione di nome funz ogni milli millisecondi.
Si noti che non sono necessarie le parentesi tonde accanto al nome della funzione. Le parentesi devono però essere indicate nel caso in cui la funzione che deve essere attivata ha bisogno di parametri. In questo caso la funzione dev'essere racchiusa fra doppi apici, come nell'esempio seguente:
Se la funzione deve ricevere come parametro una stringa, sarà necessario alternare doppi e singoli apici, come in questo esempio:
Se si vuole interrompere l'esecuzione di un timer avviato precedentemente, occorre usare una variabile in cui memorizzare il timer al momento dell'avvio:
Tale variabile potrà poi essere usata per interrompere il timer usando il metodo clearInterval come nell'esempio seguente:
ovvero:
ATTENZIONE: la variabile memTimer deve essere dichiarata globale (fuori dalle funzioni) in modo da poter essere condivisa da tutte le funzioni.
Sito realizzato in base al template offerto da
http://www.graphixmania.it
