 |
Se hai iniziato a programmare in JavaScript, ti sarai sicuramente scontrato prima o poi con concetti come asincronia, setTimeout, o Promise. Magari hai notato che il codice non viene sempre eseguito esattamente nell'ordine in cui l'hai scritto.
Il colpevole (o meglio, l'eroe silenzioso) dietro a tutto questo è lui: l'Event Loop.
Prendi un caffè, mettiti comodo e scopriamo insieme come fa JavaScript a sembrare un esperto di multitasking pur avendo a disposizione un solo thread.
Il grande equivoco: JavaScript è "Single-Threaded"
La regola d'oro da cui partire è una sola: JavaScript è single-threaded. Significa che il motore di JavaScript (come il V8 di Google Chrome) può eseguire una sola cosa alla volta nello stesso momento.
Immagina di essere l'unico cassiere in un bar affollato: puoi servire un solo cliente alla volta. Se un cliente ordina un caffè elaborato che richiede tempo, cosa fai? Non puoi bloccare l'intera fila. Devi trovare un modo per gestire le richieste in sospeso senza fermare il mondo.
È qui che entra in gioco l'architettura asincrona del browser (o di Node.js) e l'Event Loop fa da direttore d'orchestra.
Gli attori sul palcoscenico
Per capire come gira l'Event Loop, dobbiamo conoscere i quattro componenti principali del sistema:
- Call Stack (Lo Stack delle Chiamate): È la lavagna del cassiere. Lì finiscono le funzioni che JavaScript sta eseguendo in quel preciso istante. Segue la regola LIFO (Last In, First Out): l'ultima funzione che entra è la prima a uscire.
- Web APIs (o Node.js APIs): Sono strumenti messi a disposizione dall'ambiente di esecuzione (browser o Node.js). Quando incontri un
setTimeout, una chiamata fetch o un ascoltatore di eventi, il motore affida il lavoro "pesante" o "ritardato" a queste API, liberando subito il Call Stack. - Task Queue (o Callback Queue): È la sala d'attesa. Quando un'operazione asincrona (es. il timer di un
setTimeout) termina, la sua funzione di callback viene messa in coda qui, pronta per essere eseguita. - Microtask Queue: È la corsia preferenziale. Le
Promisee le mutation observer finiscono qui. Ha una priorità spietata rispetto alla Task Queue.
Come funziona la danza dell'Event Loop?
Il lavoro dell'Event Loop è estenuante ma incredibilmente semplice. Si riduce a un ciclo infinito che fa continuamente due cose:
- Controlla il Call Stack: È vuoto?
- Se sì, va a caccia di lavoro nelle code. Ma attenzione all'ordine di priorità:
- Prima svuota completamente la Microtask Queue (eseguendo tutte le Promise in sospeso).
- Poi prende un solo elemento dalla Task Queue (es. il callback di un
setTimeout) e lo sposta nel Call Stack.
Ripeti all'infinito.
 |
Mettiamo le mani in pasta: Un test per esperti (e curiosi)
Per vedere se hai afferrato il concetto, guarda questo pezzo di codice. Secondo te, in che ordine verranno stampati i messaggi nella console?
console.log('1: Inizio');
setTimeout(() => {
console.log('2: Timeout completato');
}, 0);
Promise.resolve().then(() => {
console.log('3: Promise risolta');
});
console.log('4: Fine');
Se hai pensato a 1 -> 4 -> 3 -> 2, hai centrato il bersaglio! Analizziamo il perché:
console.log('1: Inizio')entra nel Call Stack, viene eseguito subito e stampato.setTimeoutviene passato alle Web APIs. Il timer scade subito (0ms), quindi il suo callback finisce nella Task Queue.- La
Promise.resolve().then(...)registra il suo callback nella Microtask Queue. console.log('4: Fine')entra nel Call Stack e viene eseguito subito.- Il Call Stack ora è vuoto! L'Event Loop controlla le code. Trova la Microtask Queue con la Promise: la esegue e stampa "3: Promise risolta".
- Finito il blocco delle microtask, passa alla Task Queue e stampa "2: Timeout completato".
Conclusione
Capire l'Event Loop non è solo un vezzo teorico per superare i colloqui tecnici, ma la chiave di volta per scrivere codice JavaScript performante, evitare blocchi dell'interfaccia utente (il temuto UI freezing) e debuggare bug legati a race condition o tempi di esecuzione inaspettati.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
