Istruzioni setInterval() e setTimeout()

Nelle lezioni precedenti, abbiamo visto cosa sono le funzioni e alcuni parametri fondamentali. In questa lezione, vediamo a cosa servono le istruzioni setInterval() e setTimeout().

Istruzione setInterval()

L'istruzione setInterval() permette di ripete una funzione ogni periodo di tempo specificato. Ad esempio, può servire se vuoi visualizzare un timer nella tua pagina HTML. In questo caso, l'orario deve essere aggiornato ogni secondo.

La sintassi da utilizzare è: setInterval(funzione, tempo). Il tempo è il periodo in millisecondi che indica ogni quando ripetere la funzione.

function messaggio() {
  console.log("Messaggio ogni due secondi");  // Risultato nella console
}

setInterval(messaggio, 2000);

Se la funzione richiede dei parametri, posso aggiungerli dopo tempo, divisi dalla virgola: setInterval(funzione, tempo, parametro1, parametro2, ...). Ad esempio:

function messaggio(parola) {
  console.log("Messaggio ogni due secondi: "+parola);
  // Risultato nella console: "Messaggio ogni due secondi: JavaScript"
}

setInterval(messaggio, 2000, "JavaScript");

Terminare setInterval()

Per terminare un setInterval() attivo, puoi utilizzare il metodo clearInterval(). Questo metodo ha la sintassi clearInterval(id_intervallo). 

Vediamo un esempio di una variabile secondi che aumenta ogni secondo e che si ferma dopo 4 secondi (nell'esempio, abbiamo utilizzato una funzione direttamente all'interno di setInterval()).

let secondi = 0;

const orologio = setInterval(() => {
  secondi++;
  console.log("Secondi: " + secondi);

  if (secondi === 4) {
    // Quando "secondi" arrivo a 4, l'intervallo si ferma
    clearInterval(orologio);
  }
}, 1000);

Istruzione setTimeout()

L'istruzione setTimeout() permette di ritardare una funzione per un periodo specificato di tempo. Ad esempio, può essere utile se vuoi mostrare un messaggio ad un utente dopo alcuni secondi che ha aperto il tuo sito.

La sintassi da utilizzare è setTimeout(funzione, tempo). Anche in questo caso, il tempo è espresso in millisecondi.

function messaggio() {
  console.log("Messaggio dopo due secondi");  // Risultato nella console
}

setTimeout(messaggio, 2000);

Anche con setTimeout(), puoi inserire i parametri della funzione dopo tempo: setTimeout(funzione, tempo, parametro1, parametro2, ...).

Terminare setTimeout()

Per terminare un setTimeout() prima che venga eseguita la funzione, si può utilizzare clearTimeout(). La sintassi è clearTimeout(id_timer).

function messaggio() {
  console.log("Messaggio dopo due secondi");  // Risultato nella console
}

let ritardo = setTimeout(messaggio, 5000);

// Termine del setTimeout
clearTimeout(ritardo);

In questo esempio, la funzione non farà in tempo ad essere attivata, perché viene fermata da clearTimeout(). Quindi, nella console non ci sarà alcun messaggio.