JavaScript Academy · Aula

queueMicrotask e ordenação

Controle precisamente a ordem de execução.

queueMicrotask e ordenação é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Conheça queueMicrotask

queueMicrotask é uma forma direta de agendar uma microtarefa sem criar uma promessa. A função de retorno é executada depois do código síncrono atual, mas antes de qualquer macrotarefa.

É a ferramenta mais simples para adiar o trabalho até o próximo ponto de verificação de microtarefas.

Uso básico

Passe uma função para queueMicrotask. Ela é executada depois que o código síncrono termina.

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

A mesma prioridade das promessas

Uma função de retorno de queueMicrotask e uma função de retorno .then de uma promessa compartilham a fila de microtarefas. Elas são executadas na ordem em que foram agendadas.

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

Vem antes de setTimeout

Como todas as microtarefas, uma função de retorno de queueMicrotask é executada antes de qualquer macrotarefa de setTimeout, mesmo de uma que tenha sido agendada anteriormente.

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

Ordenação durante o processamento

As microtarefas são executadas na ordem FIFO. A primeira que entra na fila é executada primeiro quando a fila é processada.

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

Aninhando microtarefas

Uma microtarefa pode colocar outra microtarefa na fila. A nova é executada durante o mesmo processamento, depois das que já estavam na fila e antes de qualquer macrotarefa.

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

Demonstração completa de ordenação

Combine código síncrono, microtarefas e uma macrotarefa. Acompanhe a regra: primeiro o código síncrono, depois as microtarefas na ordem e, por fim, o temporizador.

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

Intercalação com async/await

Uma continuação de await também é uma microtarefa, portanto ela se intercala com queueMicrotask na ordem de agendamento.

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

Por que usar queueMicrotask

Use-o quando precisar adiar uma pequena parte do trabalho para depois da pilha de chamadas atual, mas antes que o navegador renderize ou que qualquer temporizador seja acionado. Isso evita a sobrecarga e a semântica de resolução de criar uma promessa descartável.

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

Evite loops infinitos de microtarefas

Como as microtarefas são processadas completamente antes das macrotarefas, uma função de retorno que sempre coloca a si mesma novamente na fila bloqueará os temporizadores e a renderização para sempre. Sempre tenha uma condição de parada.

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

O modelo mental completo

A cada turno do loop de eventos: execute uma macrotarefa (ou o código inicial), depois processe todas as microtarefas, renderize e repita. queueMicrotask permite conectar-se precisamente à fase de processamento da fila.

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ção rápida

Onde uma função de retorno de queueMicrotask é executada em relação a setTimeout(fn, 0)?

Recapitulação: queueMicrotask e ordenação

Você dominou o agendamento detalhado:

queueMicrotask agenda uma microtarefa sem uma promessa.
Ele compartilha a fila de microtarefas com as funções de retorno de promessas, na ordem FIFO.
Todas as microtarefas são processadas antes de qualquer macrotarefa e antes da renderização.
O modelo do loop: macrotarefa, processar as microtarefas, renderizar e repetir.

Perguntas Frequentes

A aula “queueMicrotask e ordenação” é grátis?

Sim — o texto completo de “queueMicrotask e ordenação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “queueMicrotask e ordenação”?

Controle precisamente a ordem de execução. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “queueMicrotask e ordenação”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy