Scopri i Timer in JavaScript

setTimeout()

Scrivendo codice JavaScript, potresti voler ritardare l'esecuzione di una funzione.

Questo è il compito di setTimeout. Si specifica una funzione di callback da eseguire in seguito e un valore che indica quanto tempo dopo si desidera eseguirla, in millisecondi:

setTimeout(() => {
  // viene eseguita dopo 2 secondi
}, 2000)
setTimeout(() => {
  // viene eseguita dopo 50 millisecondi
}, 50)

Questa sintassi definisce una nuova funzione. Puoi chiamare qualsiasi altra funzione desideri al suo interno, oppure puoi passare un nome di funzione esistente e un set di parametri:

const myFunction = (firstParam, secondParam) => {
  // fai qualcosa
}
// viene eseguita dopo 2 secondi
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout restituisce l'ID del timer. Questo generalmente non viene utilizzato, ma puoi memorizzare questo ID e cancellarlo se desideri eliminare questa esecuzione di funzione pianificata:

const id = setTimeout(() => {
  // dovrebbe essere eseguita dopo 2 secondi
}, 2000)
// ho cambiato idea
clearTimeout(id)

Ritardo zero

Se si specifica un ritardo di timeout pari a 0, la funzione di callback verrà eseguita il prima possibile, ma dopo l'esecuzione della funzione corrente:

setTimeout(() => {
  console.log('after ')
}, 0)
console.log(' before ')

Questo codice stamperà

before
after

Questo è particolarmente utile per evitare di bloccare la CPU su attività intensive e consentire l'esecuzione di altre funzioni durante l'esecuzione di un calcolo pesante, mettendo in coda le funzioni nello scheduler.

TIP

Alcuni browser (IE ed Edge) implementano un metodo setImmediate() che esegue la stessa identica funzionalità, ma non è standard ed è non disponibile su altri browser. Ma è una funzione standard in Node.js.

setInterval()

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

setInterval(() => {
  // viene eseguita ogni 2 secondi
}, 2000)

La funzione sopra viene eseguita ogni 2 secondi a meno che non venga detto di interromperla, usando clearInterval, passando l'ID dell'intervallo restituito da setInterval:

const id = setInterval(() => {
  // viene eseguita ogni 2 secondi
}, 2000)
// ho cambiato idea
clearInterval(id)

È comune chiamare clearInterval all'interno della funzione di callback setInterval, per farle determinare automaticamente se dovrebbe essere eseguita di nuovo o interrompersi. Ad esempio, questo codice esegue qualcosa a meno che App.somethingIWait non abbia il valore arrivato:

setTimeout Ricorsivo

setInterval avvia una funzione ogni n millisecondi, senza considerare quando una funzione ha terminato la sua esecuzione.

Se una funzione impiega sempre la stessa quantità di tempo, va tutto bene.

Potrebbe succedere che la funzione impieghi tempi di esecuzione diversi, a seconda delle condizioni di rete.

E potrebbe succedere che una lunga esecuzione si sovrapponga alla successiva.

Per evitare ciò, è possibile pianificare un setTimeout ricorsivo da chiamare al termine della funzione di callback:

const myFunction = () => {
  // fai qualcosa
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

setTimeout e setInterval sono disponibili in Node.js, tramite il modulo Timers.

Node.js fornisce anche setImmediate(), che è equivalente all'utilizzo di setTimeout(() => {}, 0), utilizzato principalmente per lavorare con il ciclo eventi di Node.js.