Immagina di voler realizzare un conto alla rovescia molto semplice per una pagina web. Quando il tuo utente la apre, parte un countdown di 10 secondi: dopo questo gli apparirà un messaggio. In questo articolo vediamo la “setTimeout”: cos’è e come funziona.
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Le basi di JavaScript
Se non lo sapessi, quando viene aperta una pagina web, il codice JavaScript al suo interno, a meno che tu non abbia scritto specifiche regole, viene eseguito istantaneamente.
Prendiamo questo esempio:
<p id="countdown">10</p>
<script type="text/javascript">
$(document).ready(function(){
for (k=10;k>-1;k--){
document.getElementById("countdown").innerHTML=k;
}
});
</script>
Se provi a creare una pagina web con questo codice, stai pur certo che in pochissime frazioni di secondo vedrai immediatamente uno zero.
In altre parole quel ciclo for, viene eseguito immediatamente!
Come facciamo allora, a renderlo davvero un conto alla rovescia?
Pensiamo innanzitutto, al ragionamento senza tecnichese.
Situazione di partenza: abbiamo il nostro numero più grande.
Passo base: decrementiamo il numero di un’unità ogni secondo che passa.
Termine: arriviamo ad avere il numero pari a zero, fine.
Insomma, abbiamo pianificato un algoritmo.
Tutto molto bello, tutto molto semplice: ma come si crea questo countdown in JavaScript?
Dobbiamo usare la setTimeout.
Che cos’è la setTimeout in JavaScript e come si scrive
La setTimeout è una funzione specifica di JavaScript basata su una funzione e un numero:
setTimeout(function(){ //Corpo della funzione }, numero);
La funzione specificata come primo parametro, viene eseguita una sola volta e dopo esattamente un certo numero di millisecondi dalla sua invocazione: guarda caso sono proprio quelli impostati come secondo argomento della setTimeout.
Facciamo un esempio d’uso della setTimeout
Ora che abbiamo visto che cos’è la setTimeout, è giusto fare un esempio un po’ più concreto!
Immaginiamo il nostro utente che atterra sulla nostra pagina web e dopo esattamente 2 secondi e mezzo, viene visualizzato un alert che recita “benvenuto sulla mia pagina web!”.
Perciò, la funzione che passiamo come primo argomento della setTimeout dovrà generare l’alert, il secondo argomento sarà pari a “2500” ovvero 2500ms, cioè esattamente 2 secondi e mezzo.
L’aspetto del codice è bene o male il seguente:
setTimeout(function(){
alert(“benvenuto sulla mia pagina web!”);
},2500);
Molto semplice vero?
Se torniamo al nostro esempio fatto all’inizio e hai capito come funziona la setTimeout, ti sarà semplice capire come realizzare la soluzione al problema di questo articolo 😉
