JavaScript “setTimeout”: cos’è e come funziona

di Lorenzo Neri
0 commento 94 visualizzazioni

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.

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 😉

Potrebbero interessarti

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più