JavaScript Academy · Lezione

Macrotask e coda delle attività

Comprenda come vengono pianificati timer e I/O.

Macrotask e coda delle attività è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è una macrotask?

Una macrotask (detta anche task) è un'unità di lavoro pianificata per essere eseguita in seguito, dopo la fine del codice sincrono corrente. Le callback di setTimeout sono l'esempio classico.

Le macrotask attendono nella coda dei task finché lo stack delle chiamate non è vuoto.

setTimeout rimanda il lavoro

setTimeout registra una callback da eseguire in seguito. Anche con un ritardo pari a 0, viene eseguita dopo tutto il codice sincrono corrente.

console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');

La coda dei task

Quando scatta un timer, la sua callback viene inserita nella coda dei task. L'event loop preleva un task da questa coda solo quando lo stack delle chiamate è vuoto, lo esegue fino al completamento e poi verifica nuovamente la situazione.

console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');

I task vengono eseguiti nell'ordine di accodamento

I task con lo stesso ritardo vengono eseguiti nell'ordine in cui sono stati pianificati. La coda dei task è FIFO: First In, First Out.

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');

Il ritardo è minimo, non esatto

Il ritardo specificato è il tempo minimo che deve trascorrere prima che la callback possa essere eseguita. L'esecuzione effettiva avviene solo dopo che lo stack si è svuotato e i task precedenti sono terminati, quindi può verificarsi più tardi.

setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');

Ordinamento in base al ritardo

Ritardi diversi modificano l'ordine: i ritardi più brevi diventano idonei prima, quindi in genere vengono eseguiti prima di quelli più lunghi, indipendentemente dall'ordine di pianificazione.

setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');

Un task per ogni iterazione del loop

L'event loop esegue esattamente una macrotask per iterazione, poi svolge altre operazioni prima di quella successiva. Questo mantiene il sistema reattivo tra un task e l'altro.

console.log('1');
setTimeout(() => {
  console.log('2');
  setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);

I timer annidati vengono accodati più tardi

Un timer pianificato all'interno di un task entra nella coda dopo i task già in attesa, quindi viene eseguito in un'iterazione successiva del loop.

setTimeout(() => {
  console.log('outer');
  setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);

Anche setInterval crea macrotask

setInterval pianifica una macrotask ripetuta. Qui eseguiamo alcune iterazioni e interrompiamo il processo con clearInterval per mantenere l'output entro limiti definiti.

let count = 0;
const id = setInterval(() => {
  count++;
  console.log('tick ' + count);
  if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');

Il codice sincrono ha sempre la precedenza

Indipendentemente da quanto sia breve il ritardo, ogni macrotask attende che termini tutto il codice sincrono dell'esecuzione corrente. Lo stack deve prima svuotarsi.

setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');

Perché le macrotask sono importanti

Le macrotask permettono di rimandare il lavoro senza bloccare l'esecuzione. Suddividere un'operazione pesante in parti temporizzate mantiene un'app reattiva. Tuttavia, le macrotask non hanno la priorità più alta: le microtask (Promise) vengono eseguite prima della macrotask successiva, come vedrà nella prossima lezione.

console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');

Verifica rapida

Quando viene eseguita la callback di setTimeout(cb, 0)?

Riepilogo: macrotask

Ha imparato come viene pianificato il lavoro rimandato:

Le macrotask (setTimeout, setInterval) attendono nella coda dei task.
La coda è FIFO; l'event loop esegue un task per ogni iterazione.
Il ritardo è un valore minimo e il codice sincrono viene sempre eseguito per primo.
Le microtask hanno una priorità maggiore, come esplorerà nella prossima lezione.

Domande Frequenti

La lezione «Macrotask e coda delle attività» è gratuita?

Sì — il testo completo di «Macrotask e coda delle attività» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Macrotask e coda delle attività»?

Comprenda come vengono pianificati timer e I/O. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Macrotask e coda delle attività»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy