Execute algumas linhas com setTimeout e uma promessa, e a ordem de saída poderá surpreendê-lo. O loop de eventos JavaScript explica o porquê. É o mecanismo que permite que uma linguagem de thread único administre temporizadores, chamadas de rede e cliques sem congelar.

Depois de entender isso, toda uma classe de bugs confusos começa a fazer sentido. Executamos cada exemplo no Node.js 24 e a saída vem dessa execução. As regras básicas de ordenação também se aplicam aos navegadores e apontamos onde o Node.js difere. Você aproveitará mais isso se já conhecer os fundamentos das promessas JavaScript.

Por que existe o loop de eventos

O JavaScript executa seu código em um thread principal, portanto, apenas uma parte dele é executada por vez. Se simplesmente esperasse por uma solicitação de rede, a página congelaria até que a resposta voltasse.

Portanto, o JavaScript não espera. O trabalho lento é entregue ao ambiente host, ou seja, ao navegador ou Node.js, que pode lidar com isso em segundo plano. Quando esse trabalho termina, um retorno de chamada é colocado em uma fila. A função do loop de eventos é mover os retornos de chamada enfileirados para a pilha quando ela estiver livre.

Pense em um chef trabalhando sozinho. O chef coloca um prato no forno e ajusta o cronômetro, em vez de ficar olhando para ele. Quando o cronômetro toca, a tarefa entra em uma lista e o chef a pega após terminar o que está em mãos.

As partes móveis

As tarefas às vezes são chamadas de macrotarefas. Estritamente falando, pode haver diversas fontes de tarefas e os detalhes exatos diferem entre ambientes.

As regras

1. Execute todo o código síncrono até que a pilha de chamadas esteja vazia.
2. Execute todas as microtarefas, incluindo as novas adicionadas ao longo do caminho.
3. Em um navegador, renderize uma atualização, se houver.
4. Pegue uma tarefa de uma fila e execute-a.
5. Volte para a etapa 2.

O detalhe mais importante: todas microtarefas e depois uma tarefa. A maioria dos quebra-cabeças de loop de eventos é resolvida aplicando-se essa única regra.

Veja o pedido

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

Aqui está o que aconteceu. As duas linhas console.log são síncronas, portanto foram executadas primeiro. O retorno de chamada da promessa e queueMicrotask foram para a fila de microtarefas e foram executados assim que a pilha ficou vazia, na ordem em que foram adicionados. O retorno de chamada do temporizador teve que esperar pela mudança da tarefa, mesmo que seu atraso fosse zero.

Microtarefas são executadas entre temporizadores

Após cada tarefa, a fila de microtarefas é esvaziada novamente. Este exemplo prova isso:

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

A promessa, que foi criada durante o primeiro cronômetro, foi executada antes do segundo cronômetro. Os navegadores modernos e o Node.js 11 e posteriores se comportam dessa maneira.

Onde esperar se encaixa

await divide uma função em duas. Tudo antes é executado de forma síncrona e tudo depois é agendado como uma microtarefa. Isso surpreende muitas pessoas:

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

Uma função async não inicia em segundo plano. Ele é executado no mesmo thread até atingir o primeiro await. Isso se aplica até mesmo quando se espera algo que não é uma promessa real, como null. Consulte nosso guia JavaScript assíncrono/aguardado para obter mais informações sobre essa sintaxe.

Bloqueando o ciclo

Enquanto o código síncrono é executado, nada mais pode. Para mostrar isso, definimos um temporizador para 0 ms e mantivemos o thread ocupado por meio segundo:

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

O atraso do cronômetro é um mínimo, não uma garantia. Ele foi executado apenas quando a pilha ficou livre. Em uma página da web, um loop longo como esse significa que os cliques não respondem e as animações param. Em um servidor, todas as outras solicitações precisam esperar, e é por isso que uma chamada síncrona lenta pode prejudicar todos os usuários de um processo Node.js.

As causas comuns de bloqueio incluem loops enormes, análise de JSON muito grande, funções de arquivo síncronas como readFileSync em manipuladores de solicitação e expressões regulares catastróficas.

Permanecendo responsivo

Para trabalhos pesados, dê ao ciclo de eventos uma chance de respirar. Uma maneira é pausar um cronômetro de vez em quando, o que permite que outras tarefas sejam executadas:

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

O outro cronômetro funcionou no meio, porque cedemos com uma tarefa real. O código real renderia a cada tantos itens ou milissegundos. Para trabalhos realmente pesados ​​de CPU, como processamento de imagens, use um Web Worker em navegadores ou um thread de trabalho em Node.js, que é executado em threads separados.

Fome de microtarefas

Como o loop esvazia completamente a fila de microtarefas antes de prosseguir, uma microtarefa que continua agendando mais pode interromper todo o resto. Testamos isso com 100.000 microtarefas encadeadas:

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

O cronômetro não poderia funcionar até que todos eles terminassem. Se essa cadeia nunca terminasse, os temporizadores nunca seriam acionados e, em um navegador, a página nunca seria repintada. Observe que ceder await em uma promessa resolvida não ajuda aqui, porque apenas adiciona outra microtarefa. Você precisa de uma tarefa real, como um cronômetro, para dar oportunidade aos outros.

Renderização em navegadores

Um navegador geralmente tem a chance de pintar entre as tarefas. Isso explica um bug comum:

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

O controle giratório nunca aparece porque o navegador não teve oportunidade de renderizar entre essas linhas. Para consertar, deixe passar uma estrutura antes do início do trabalho pesado ou transfira esse trabalho para um trabalhador. Para código que altera o visual, requestAnimationFrame é executado logo antes da próxima pintura, o que o torna a ferramenta certa para animação.

Diferenças do Node.js.

Node.js possui seu próprio loop de eventos com várias fases, incluindo temporizadores, pesquisa de E/S e setImmediate. Também possui process.nextTick, que roda em sua própria fila. Aqui está o que vimos ao executá-los dentro de uma função assíncrona:

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

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

Muitos artigos afirmam que nextTick sempre supera as promessas e que um cronômetro supera setImmediate. Nosso resultado mostra que não é tão simples. Nosso código já estava sendo executado em uma microtarefa, então a fila de promessas continuou primeiro. E sabe-se que a ordem de setTimeout e setImmediate varia dependendo de onde eles são chamados. Portanto, não escreva código que dependa da ordem exata deles. Se uma coisa deve acontecer após a outra, encadeie-as explicitamente.

Questionário de entrevista

Tente descobrir a ordem antes de ler a resposta:

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

Nossa execução imprimiu a, f, c, e, b, d. Aqui está o porquê:

1. a e f são síncronos, portanto são executados primeiro.
2. A pilha está vazia, então as microtarefas são executadas: c, depois a nova microtarefa e, na mesma rodada.
3. Agora uma tarefa: temporizador b, que foi colocado na fila primeiro.
4. Em seguida, a próxima tarefa: temporizador d, que foi colocado na fila durante a microtarefa.

Erros comuns

• Pensar setTimeout é exato. O atraso é apenas o mínimo.
• Pensar async significa outro thread. O código assíncrono ainda é executado no thread principal entre as esperas.
• Usar suspensão para corrigir a ordem. Esperar pela condição real é muito mais confiável, o que também se aplica a testes instáveis.
• Usando forEach com await. Não espera entre os itens. Consulte Métodos de matriz JavaScript.
• Fazer trabalho síncrono pesado em um manipulador de servidor. Uma solicitação pode atrasar todas as outras solicitações.

Considerações finais

Lembre-se da regra básica: execute a pilha até que esteja vazia, execute todas as microtarefas, depois execute uma tarefa e repita. Todo o resto decorre disso. Para mantê-lo firme, escreva sua própria versão do questionário acima, preveja o resultado no papel e execute-o. Errar e entender o porquê lhe ensinará mais do que qualquer diagrama.

Perguntas frequentes

Continue aprendendo