Simulador do Event Loop JavaScript
Monte um pequeno script com código síncrono, microtasks e macrotasks para ver a ordem exata em que o event loop do JavaScript o executaria.
Script (na ordem do código)
Ordem de execução
| Etapa 1 | console.log('1') | Síncrono (console.log) |
|---|---|---|
| Etapa 2 | console.log('4') | Síncrono (console.log) |
| Etapa 3 | Promise.resolve().then(() => log('3')) | Microtask (Promise.then) |
| Etapa 4 | setTimeout(() => log('2'), 0) | Macrotask (setTimeout) |
Como funciona o simulador do event loop do JavaScript
Monte um pequeno script com código síncrono, microtasks e macrotasks para ver a ordem exata em que o event loop do JavaScript o executaria.
As regras do event loop
- Todo código síncrono roda primeiro, de cima para baixo.
- Depois que o código síncrono termina, toda a fila de microtasks (callbacks de Promise .then, queueMicrotask) é esvaziada antes de qualquer outra coisa rodar.
- Depois a próxima macrotask (setTimeout, setInterval) roda, seguida imediatamente por esvaziar a fila de microtasks de novo — e isso se repete para cada macrotask.
Como usar
- Adicione etapas e marque cada uma como síncrona, microtask ou macrotask.
- Dê um atraso em milissegundos a uma macrotask — isso afeta a ordem em relação a outras macrotasks.
- Veja a ordem de execução calculada à direita.
Pegadinhas comuns
Um `setTimeout(fn, 0)` nunca roda antes de um `Promise.resolve().then(fn)`, mesmo com atraso de 0ms — toda microtask sempre esvazia antes da próxima macrotask começar. Isso surpreende a maioria das pessoas na primeira vez que veem.
Privacidade
Executa localmente no seu navegador. Nenhum dado é enviado ao servidor.
Perguntas frequentes
Por que o callback da Promise roda antes do setTimeout(fn, 0)?
Porque as microtasks sempre esvaziam completamente antes de o event loop pegar a próxima macrotask, independente do atraso da macrotask — um timeout de 0ms não é "imediato", é só o menor atraso possível de macrotask.
Isso cobre async/await?
Não diretamente como um tipo de etapa próprio, mas async/await é construído sobre promises por baixo dos panos — um `await` suspende e retoma como uma microtask, do mesmo jeito que um callback `.then()`.
Essa ordem é garantida em todos os navegadores?
Sim — a ordem relativa de "microtasks esvaziam completamente entre macrotasks" faz parte da especificação HTML/ECMAScript, não é um detalhe de implementação, então todo motor JavaScript compatível com a especificação segue isso.