setTimeout JavaScript: programmare l’esecuzione di codice

setTimeout è una funzione built-in di JavaScript che consente di programmare l’esecuzione di una porzione di codice.

In altre parole, definendo la funzione da eseguire come F ed il tempo di attesa come T, potrai schedulare l’esecuzione di F dopo T millisecondi, facendo uso di setTimeout().

setTimeout: la sintassi

La sintassi di setTimeout è la seguente:

var timeoutID = setTimeout(aFunction, delay, arg1, arg2, ...);

dove aFunction è il riferimento alla funzione da eseguire. E’ un parametro obbligatorio e può essere sia una ‘tradizionale’, una funzione anonima o una arrow function.

delay esprime tra quanti millisecondi aFunction verrà eseguita. E’ un parametro opzionale, se non specificato, assumerà il valore 0.

Quando il valore impostato è 0, la funzione specificata come primo argomento verrà eseguita alla prossima iterazione dell’event loop di JavaScript.

Tutti i parametri successivi (arg1, arg2, ..) sono parametri opzionali che verranno passati come argomenti alla funzione specificata come primo parametro.

La funzione, quando invocata correttamente, ritorna un ID, spesso definito timerID.

setTimeout in JavaScript: alcuni esempi

Di seguito troverai alcuni esempi di utilizzo della funzione setTimeout() disponibile in JavaScript.

Uso di setTimeout con funzione tradizionale

In questo esempio faccio uso di setTimeout utilizzando una funzione ‘tradizionale’, ovvero aFunction().

function aFunction() {
   console.log("running aFunction()");
}
setTimeout(aFunction, 5000);

Uso di setTimeout con funzione anonima

Nell’esempio proposto utilizzo setTimeout fornendo come argomento una funzione anonima:

setTimeout(
   function() {
      console.log("running an anonymous function");
   }, 
   5000
);

Uso di setTimeout con arrow function

Di seguito troverai un esempio dove setTimeout viene invocata facendo uso di un’arrow function:

setTimeout(
   () => {
      console.log("running an arrow function");
   }, 
   20000
);

clearTimeout in JavaScript: alcuni esempi

clearTimeout è una funzione built-in in JavaScript che consente di annullare l’esecuzione programmata tramite setTimeout().

Tale funzione accetta solo un parametro: l’id ritornato da setTimeout().

Di seguito è proposto un esempio di utilizzo di clearTimeout().

const timerID = setTimeout(
   () => {
      console.log("running an arrow function");
   }, 
   20000
);
document.getElementById("my-button").addEventLister("click", () => {
   clearTimeout(timerID);
   console.log("arrow function execution aborted");
})

Per comprendere l’esempio, considera di avere un pulsante con id “my-button”.

L’utente del sito che contiene il codice JavaScript dell’esempio, cliccando sul pulsante prima di 20 secondi, potrà annullare l’esecuzione dell’arrow function, programmata utilizzando setTimeout.

setTimeout JavaScript – supporto browsers

setTimeout() è una funzione pienamente supportata da tutti i browsers, anche quelli più datati come Internet Explorer.

Puoi controllare i dettagli riguardo al supporto di questa funzione grazie a caniuse.com.

setTimeout JavaScript – Conclusioni

In questo articolo hai visto come programmare l’esecuzione di codice in JavaScript, tramite l’uso della funzione setTimeout().

Inoltre, hai avuto la possibilità di conoscere la funzione clearInterval(), utile per annullare l’esecuzione di codice programmata in precedenza tramite l’utilizzo di setTimeout().

Qualora fossi interessato ad altri articoli riguardo JavaScript, ti consiglio di leggere la sezione di questo sito dedicata a JavaScript.