Il linguaggio JavaScript, tra le sue moltissime e utili funzionalità, ci permette di mettere in relazione il nostro codice con il tempo. Difatti, grazie ai metodi nativi setTimeout(), setInterval() e clearInterval() possiamo “temporizzare” alcune operazioni dell’oggetto window. Questi metodi sono sempre più utilizzati per rendere le pagine web davvero interattive per l’utente: vediamo insieme come funzionano nel dettaglio e come utilizzarli al meglio.
setTimeout()
Il suo scopo è quello di far partire una determinata funzione dopo un certo lasso di tempo, espresso in “millisecondi”. Andiamo ad analizzare la sintassi:
window.setTimeout("nome_funzione()", tempo_in_millisecondi);
Mettiamo il caso in cui il nostro obiettivo sia quello di far comparire, 5 secondi dopo aver premuto un pulsante, un alert sullo schermo di chi sta utilizzando il nostro sito:
<button onclick="window.setTimeout(funzioneAlert, 5000)">Clicca!</button>
<script>
function funzioneAlert() {
alert('Stai usando il mio sito!');
}
</script>
In questa maniera molto semplice, dopo il tempo che abbiamo impostato, il nostro alert contenente la stringa “Stai usando il mio sito!” verrà visualizzata.
Questo metodo può tornare utile in molte situazioni: per esempio, quando vogliamo far comparire un elemento dopo un determinato tempo dal caricamento della pagina, come il link per effettuare il download di un file. Molto importante è impostare correttamente il parametro temporale: bisogna sempre tenere a mente di scriverlo in millisecondi e non in normali secondi, come potrebbe sembrare più intuitivo fare! Ad esempio, scrivere solo 5 e non 5000 farebbe comparire in maniera praticamente immediata l’alert.
setInterval()
Lo scenario classico in cui viene utilizzato questo metodo è quello in cui abbiamo bisogno che un certo elemento del DOM venga aggiornato con un intervallo regolare. Tipicamente, questo è il caso nel quale vogliamo realizzare un orologio sul nostro sito. Il codice per realizzarlo sarà:
<input type="text" id="ora_corrente" />
<script type="text/javascript">
var intervallo = window.setInterval(orologio, 1000);
function orologio() {
var data = new Date();
$("#ora_corrente").html(data.toLocaleTimeString());
}
</script>
Il metodo aggiornerà la funzione orologio, il cui nome viene specificato nel primo parametro, in relazione ad ogni intervallo di tempo che noi desideriamo e che indicheremo come secondo parametro, in questo caso 1000 millisecondi, quindi un secondo.
La funzione verrà quindi richiamata di continuo e andrà a modificare il contenuto del campo input ora_corrente, ricreando ogni volta una nuova data e utilizzando in questo caso anche la funzione JavaScript di conversione toLocaleTimeString(), che trasforma il timestamp in una stringa con solo ore, minuti e secondi.
Nel caso in cui noi avessimo bisogno di interrompere l’esecuzione del metodo setInterval()? La soluzione è altrettanto semplice: basta utilizzare clearInterval().
clearInterval()
Nella nostra pagina, abbiamo bisogno che l’utente possa interrompere l’aggiornamento automatico dell’orologio appena costruito. In questo caso, possiamo intervenire aggiungendo un pulsante di stop, in questa maniera:
<button onclick="int=window.clearInterval(intervallo)">Stop!</button>
Al metodo clearInterval passiamo esclusivamente il nome della variabile intervallo, alla quale avevamo assegnato il metodo setInterval: premendo il bottone, automaticamente l’orologio smetterà di aggiornarsi.
Ultima nota: visto l’utilizzo molto diffuso dei metodi di cui abbiamo appena discusso, ormai JavaScript accetta le sintassi anche senza il window. che dovrebbe precedere la chiamata.
Dai un’occhiata ai Corsi LaraMind, diventa uno sviluppatore di livello avanzato, scegli LaraMind!
Se invece stai cercando un percorso di formazione one to one personalizzato scrivici a amministrazione@laramind.com e in un attimo saremo da te!
