Scopri i Timer di JavaScript

setTimeout()

Nel codice JavaScript, potresti voler ritardare l’esecuzione di una funzione.

Questo è il compito di setTimeout. Specifichi una funzione di callback da eseguire in seguito e un valore che esprime quanto tempo dopo desideri che venga eseguita, in millisecondi:

setTimeout(() => {
  // eseguito dopo 2 secondi
}, 2000);

setTimeout(() => {
  // eseguito dopo 50 millisecondi
}, 50);

Questa sintassi definisce una nuova funzione. Puoi chiamare qualsiasi altra funzione che desideri all’interno di essa o puoi passare un nome di funzione esistente e un set di parametri:

const myFunction = (firstParam, secondParam) => {
  // fai qualcosa
};

// eseguito dopo 2 secondi
setTimeout(myFunction, 2000, firstParam, secondParam);

setTimeout restituisce l’ID del timer. Questo non viene generalmente utilizzato, ma è possibile memorizzare questo ID e cancellarlo se si desidera eliminare questa esecuzione pianificata della funzione:

const id = setTimeout(() => {
  // dovrebbe essere eseguito dopo 2 secondi
}, 2000);

// Ho cambiato idea
clearTimeout(id);

Ritardo zero

Se specifici il ritardo del timeout a 0, la funzione di callback verrà eseguita il ​​prima possibile, ma dopo l’esecuzione della funzione corrente:

setTimeout(() => {
  console.log("dopo ");
}, 0);

console.log("prima ");

Questo codice stamperà

prima
dopo

Questo è particolarmente utile per evitare il blocco della CPU su compiti intensivi e consentire l’esecuzione di altre funzioni durante l’esecuzione di un calcolo pesante, accodando le funzioni nella pianificazione.

Alcuni browser (IE e Edge) implementano un metodo setImmediate() che svolge questa stessa funzionalità esatta, ma non è standard e non disponibile su altri browser. Tuttavia, è una funzione standard in Node.js.

setInterval()

setInterval è una funzione simile a setTimeout, con una differenza: anziché eseguire la funzione di callback una volta, la eseguirà per sempre, all’intervallo di tempo specificato (in millisecondi):

setInterval(() => {
  // eseguito ogni 2 secondi
}, 2000);

La funzione sopra viene eseguita ogni 2 secondi a meno che tu non le dica di smettere, usando clearInterval, passandogli l’ID dell’intervallo restituito da setInterval:

const id = setInterval(() => {
  // eseguito ogni 2 secondi
}, 2000);

clearInterval(id);

È comune chiamare clearInterval all’interno della funzione di callback di setInterval, per permetterle di determinare automaticamente se deve essere eseguita di nuovo o fermarsi. Ad esempio, questo codice esegue qualcosa a meno che App.somethingIWait non abbia il valore arrived:

const interval = setInterval(() => {
  if (App.somethingIWait === "arrived") {
    clearInterval(interval);
  }
  // altrimenti fai cose
}, 100);