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);