JavaScript Academy · Lezione

queueMicrotask e ordine di esecuzione

Controlli con precisione l'ordine di esecuzione.

queueMicrotask e ordine di esecuzione è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Conoscere queueMicrotask

queueMicrotask è un modo diretto per pianificare un microtask senza creare una Promise. Il callback viene eseguito dopo il codice sincrono corrente, ma prima di qualsiasi macrotask.

È lo strumento più semplice per rimandare un'attività al checkpoint del microtask immediatamente successivo.

Utilizzo di base

Passi una funzione a queueMicrotask. Viene eseguita al termine del codice sincrono.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

La stessa priorità delle Promise

Un callback di queueMicrotask e un .then di una Promise condividono la coda dei microtask. Vengono eseguiti nell'ordine in cui sono stati pianificati.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Ha la precedenza su setTimeout

Come tutti i microtask, un callback di queueMicrotask viene eseguito prima di qualsiasi macrotask di setTimeout, anche se quest'ultimo è stato pianificato in precedenza.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Ordinamento durante lo svuotamento

I microtask vengono eseguiti in ordine FIFO. Il primo accodato viene eseguito per primo quando la coda viene svuotata.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Annidare i microtask

Un microtask può accodare un altro microtask. Il nuovo viene eseguito durante lo stesso svuotamento, dopo quelli già accodati e prima di qualsiasi macrotask.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Dimostrazione dell'ordinamento completo

Combini codice sincrono, microtask e un macrotask. Segua la regola: prima il codice sincrono, poi i microtask nell'ordine e infine il timer.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

Interazione con async/await

Una continuazione dopo un await è anch'essa un microtask, quindi si alterna con queueMicrotask in base all'ordine di pianificazione.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Perché usare queueMicrotask

Lo utilizzi quando deve rimandare una piccola attività a dopo l'attuale call stack, ma prima che il browser esegua il rendering o qualsiasi timer. Evita il sovraccarico e la semantica della risoluzione associati alla creazione di una Promise usa e getta.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Eviti i cicli infiniti di microtask

Poiché i microtask vengono svuotati completamente prima dei macrotask, un callback che si accoda di nuovo all'infinito bloccherà per sempre i timer e il rendering. Preveda sempre una condizione di arresto.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

Il modello mentale completo

A ogni iterazione del ciclo degli eventi: esegua un macrotask (o lo script iniziale), poi svuoti tutti i microtask, quindi esegua il rendering e ripeta. queueMicrotask consente di inserirsi con precisione nella fase di svuotamento.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Verifica rapida

Dove viene eseguito un callback di queueMicrotask rispetto a setTimeout(fn, 0)?

Riepilogo: queueMicrotask e ordinamento

Ha acquisito familiarità con la pianificazione di precisione:

queueMicrotask pianifica un microtask senza una Promise.
Condivide la coda dei microtask con i callback delle Promise, in ordine FIFO.
Tutti i microtask vengono svuotati prima di qualsiasi macrotask e prima del rendering.
Il modello del ciclo è: macrotask, svuotamento dei microtask, rendering, ripetizione.

Domande Frequenti

La lezione «queueMicrotask e ordine di esecuzione» è gratuita?

Sì — il testo completo di «queueMicrotask e ordine di esecuzione» è 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 «queueMicrotask e ordine di esecuzione»?

Controlli con precisione l'ordine di esecuzione. 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 4 di 4.

Quanto tempo richiede la lezione «queueMicrotask e ordine di esecuzione»?

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