PROGRAMMIAMO
JS - setInterval e clearInterval
La temporizzazione

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:

// Intervallo di 500ms per essere sicuri che i secondi si aggiornino abbastanza frequentemente
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

Il metodo setInterval visto nell'esempio precedente ha una sintassi piuttosto semplice:

window.setInterval(funz, milli);

ovvero in notazione abbreviata (omettendo il primo oggetto della catena):

setInterval(funz, milli);

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:

setInterval("funz(2,3,4)", 500);

Se la funzione deve ricevere come parametro una stringa, sarÓ necessario alternare doppi e singoli apici, come in questo esempio:

setInterval("funz('ciao a tutti')", 500);

 

Il metodo clearInterval

Se si vuole interrompere l'esecuzione di un timer avviato precedentemente, occorre usare una variabile in cui memorizzare il timer al momento dell'avvio:

memTimer = setInterval(funz, milli); // avvia l'esecuzione e memorizza in memTimer

Tale variabile potrÓ poi essere usata per interrompere il timer usando il metodo clearInterval come nell'esempio seguente:

clearInterval (memTimer);  //interrompe l'esecuzione di setInterval

ovvero:

window.clearInterval (memTimer);  //interrompe l'esecuzione di setInterval

ATTENZIONE: la variabile memTimer deve essere dichiarata globale (fuori dalle funzioni) in modo da poter essere condivisa da tutte le funzioni.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it