Esegui qualche riga con setTimeout e una promessa e l’ordine di output potrebbe sorprenderti. Il ciclo di eventi JavaScript ne spiega il motivo. È il meccanismo che consente a un linguaggio a thread singolo di gestire timer, chiamate di rete e clic senza bloccarsi.

Una volta capito, tutta una serie di bug confusi inizia ad avere senso. Abbiamo eseguito ogni esempio su Node.js 24 e l’output proviene da quell’esecuzione. Le regole di ordinamento principali si applicano anche ai browser e indichiamo dove Node.js differisce. Otterrai di più da questo se conosci già le basi delle promesse JavaScript.

Perché esiste il ciclo di eventi

JavaScript esegue il tuo codice su un thread principale, quindi viene eseguito solo un pezzo alla volta. Se attendesse semplicemente una richiesta di rete, una pagina si bloccherebbe fino all’arrivo della risposta.

Quindi JavaScript non aspetta. Il lavoro lento viene affidato all’ambiente host, ovvero al browser o a Node.js, che può gestirlo in background. Al termine del lavoro, una richiamata viene inserita in una coda. Il compito del ciclo di eventi è spostare i callback in coda nello stack quando è libero.

Pensa a uno chef che lavora da solo. Lo chef mette un piatto nel forno e imposta un timer, invece di fissarlo. Quando suona il timer, l’attività viene inserita in un elenco e lo chef la riprende dopo aver terminato ciò che è attualmente in mano.

Le parti in movimento

Le attività sono talvolta chiamate macroattività. A rigor di termini, potrebbero esserci diverse origini di attività e i dettagli esatti differiscono da un ambiente all’altro.

Le regole

1. Esegui tutto il codice sincrono finché lo stack di chiamate non è vuoto.
2. Esegui tutti i microtask, compresi quelli nuovi aggiunti lungo il percorso.
3. In un browser, esegui il rendering di un aggiornamento se è necessario.
4. Prendi una attività da una coda ed eseguila.
5. Torna al passaggio 2.

Il dettaglio più importante: tutte le microattività, poi una attività. La maggior parte dei puzzle del ciclo di eventi vengono risolti applicando quella singola regola.

Vedi l’ordine

console.log("1 sync");
setTimeout(() => console.log("5 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("2 sync");

// 1 sync
// 2 sync
// 3 promise
// 4 microtask
// 5 timeout

Ecco cosa è successo. Le due linee console.log sono sincrone, quindi vengono eseguite per prime. La callback della promessa e queueMicrotask sono entrati nella coda dei microtask e sono stati eseguiti non appena lo stack era vuoto, nell’ordine in cui sono stati aggiunti. La richiamata del timer doveva attendere il turno di un’attività, anche se il suo ritardo era pari a zero.

I microtask vengono eseguiti tra i timer

Dopo ogni singola attività, la coda delle microattività viene nuovamente svuotata. Questo esempio lo dimostra:

setTimeout(() => {
  console.log("timer 1");
  Promise.resolve().then(() => console.log("promise inside timer 1"));
}, 0);
setTimeout(() => console.log("timer 2"), 0);

// timer 1
// promise inside timer 1
// timer 2

La promessa, creata durante il primo timer, è stata eseguita prima del secondo timer. I browser moderni e Node.js 11 e versioni successive si comportano in questo modo.

Dove si adatta l’attesa

await divide una funzione in due. Tutto prima viene eseguito in modo sincrono e tutto dopo è pianificato come microattività. Ciò sorprende molte persone:

async function task() {
  console.log("A before await");
  await null;
  console.log("C after await");
}

task();
console.log("B after calling task");

// A before await
// B after calling task
// C after await

Una funzione async non si avvia in background. Funziona sullo stesso thread finché non raggiunge il primo await. Ciò vale anche quando si attende qualcosa che non è una vera promessa, come null. Consulta la nostra guida JavaScript async/await per ulteriori informazioni su questa sintassi.

Bloccare il ciclo

Mentre il codice sincrono viene eseguito, nient’altro può farlo. Per dimostrarlo, impostiamo un timer su 0 ms, quindi teniamo occupato il thread per mezzo secondo:

const start = Date.now();
setTimeout(() => console.log("timer ran after", Date.now() - start, "ms"), 0);
while (Date.now() - start < 500) {}

// timer ran after about 500 ms

Il ritardo del timer è un minimo, non una garanzia. Funzionava solo quando lo stack si liberava. In una pagina Web, un ciclo lungo come questo significa che i clic non rispondono e le animazioni si interrompono. Su un server, ogni altra richiesta deve attendere, motivo per cui una chiamata sincrona lenta può danneggiare tutti gli utenti di un processo Node.js.

Le cause comuni di blocco includono loop enormi, analisi di JSON molto grandi, funzioni di file sincrone come readFileSync nei gestori di richieste ed espressioni regolari catastrofiche.

Rimanere reattivo

Per lavori pesanti, dai al ciclo degli eventi la possibilità di respirare. Un modo è mettere in pausa un timer di tanto in tanto, in modo da consentire l’esecuzione di altre attività:

const items = [0, 1, 2, 3, 4];

async function processAll() {
  for (const item of items) {
    if (item === 2) await new Promise((r) => setTimeout(r, 0));
    console.log("item", item);
  }
}

setTimeout(() => console.log("other work gets a turn"), 0);
processAll();

// item 0
// item 1
// other work gets a turn
// item 2
// item 3
// item 4

L’altro timer è andato a metà, perché abbiamo ceduto con un compito vero. Il codice reale produrrebbe ogni tanti elementi o millisecondi. Per lavori che richiedono un utilizzo intensivo della CPU, come l’elaborazione delle immagini, utilizza un Web Worker nei browser o un thread di lavoro in Node.js, che viene eseguito su thread separati.

Fame di microtask

Poiché il ciclo svuota completamente la coda delle microtask prima di proseguire, una microtask che continua a pianificare di più può fermare tutto il resto. Lo abbiamo testato con 100.000 microtask concatenati:

let count = 0;
let timerFired = false;
setTimeout(() => { timerFired = true; }, 0);

function spin() {
  count++;
  if (count < 100000) queueMicrotask(spin);
  else console.log("timer fired during microtasks?", timerFired);
}
queueMicrotask(spin);

// timer fired during microtasks? false

Il timer non poteva funzionare finché non erano stati completati tutti. Se quella catena non finisse mai, i timer non si attiverebbero mai e in un browser la pagina non verrebbe mai ridisegnata. Si noti che cedere con await su una promessa mantenuta non aiuta qui, perché aggiunge semplicemente un altro microtask. Hai bisogno di un compito reale, come un timer, per dare il turno agli altri.

Rendering nei browser

Un browser di solito ha la possibilità di dipingere tra un’attività e l’altra. Questo spiega un bug comune:

spinner.hidden = false;
doHeavyWork();              // blocks the thread
spinner.hidden = true;

Lo spinner non viene mai visualizzato perché il browser non ha avuto la possibilità di eseguire il rendering tra quelle righe. Per risolverlo, lascia passare un telaio prima che inizi il lavoro pesante o trasferisci quel lavoro a un lavoratore. Per il codice che modifica gli elementi visivi, requestAnimationFrame viene eseguito subito prima del disegno successivo, il che lo rende lo strumento giusto per l’animazione.

Differenze di Node.js

Node.js ha un proprio ciclo di eventi con diverse fasi, inclusi timer, polling I/O e setImmediate. Ha anche process.nextTick, che viene eseguito nella propria coda. Ecco cosa abbiamo visto durante l’esecuzione di questi dall’interno di una funzione asincrona:

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));
process.nextTick(() => console.log("nextTick"));
Promise.resolve().then(() => console.log("promise"));

// promise
// nextTick
// immediate
// timeout

Molti articoli affermano che nextTick batte sempre le promesse e che un timer batte setImmediate. Il nostro risultato mostra che non è così semplice. Il nostro codice era già in esecuzione all’interno di un microtask, quindi la coda delle promesse è proseguita per prima. E’ noto che l’ordine di setTimeout e setImmediate varia a seconda del luogo da cui vengono chiamati. Quindi non scrivere codice che dipenda dall’ordine esatto di questi. Se deve succedere una cosa dopo l’altra, concatenale esplicitamente.

Quiz di intervista

Prova a capire l’ordine prima di leggere la risposta:

console.log("a");
setTimeout(() => console.log("b"), 0);
Promise.resolve().then(() => {
  console.log("c");
  setTimeout(() => console.log("d"), 0);
  Promise.resolve().then(() => console.log("e"));
});
console.log("f");

La nostra esecuzione ha stampato a, f, c, e, b, d. Ecco perché:

1. a e f sono sincroni, quindi vengono eseguiti per primi.
2. Lo stack è vuoto, quindi i microtask vengono eseguiti: c, quindi il nuovo microtask e, nello stesso round.
3. Ora un’attività: timer b, che è stato messo in coda per primo.
4. Quindi l’attività successiva: timer d, che è stato messo in coda durante la microattività.

Errori comuni

• Pensare setTimeout è esatto. Il ritardo è solo minimo.
• Pensare async significa un altro thread. Il codice asincrono viene ancora eseguito sul thread principale tra le attese.
• Utilizzare le fasi di sonno per correggere l’ordine. Attendere la condizione effettiva è molto più affidabile, il che si applica anche ai test instabili.
• Utilizzando forEach con await. Non attende tra gli elementi. Vedi Metodi per gli array JavaScript.
• Esecuzione di un intenso lavoro sincrono in un gestore di server. Una richiesta può ritardare ogni altra richiesta.

Considerazioni finali

Ricorda la regola principale: esegui lo stack finché non è vuoto, esegui tutte le microattività, quindi esegui un’attività e ripeti. Tutto il resto ne consegue. Per renderlo efficace, scrivi la tua versione del quiz sopra, prevedi il risultato su carta e poi eseguilo. Sbagliarne uno e capirne il motivo ti insegnerà più di qualsiasi diagramma.

Domande frequenti

Continua a imparare