./prontouso.com

FERRAMENTAS DE DESENVOLVIMENTO

Simulador do Event Loop JavaScript

Monte uma sequência ou cole instruções JavaScript compatíveis para modelar código síncrono, microtasks, timers, callbacks de animação e nextTick do Node.js passo a passo.

Status da ferramentaRoda no seu navegador
Prévia
~/js/simulador-event-loop
SIMULADOREVENT LOOP AO VIVO
Cenários Comuns & Predefinições

Questão clássica de entrevista: console.log síncrono, setTimeout(0), Promise.then e log final.

Script (Na Ordem do Código)

Modelo interativo passo a passo da Call Stack, Fila de Microtasks, Fila de Tarefas, callbacks de animação e nextTick do Node.js.

ms
Total de Etapas
4
Chamadas Síncronas
2
Microtasks
1
Macrotasks
1
Ciclos do Loop
2
Ciclo 1Instantâneo 1 de 12
Fase do Event Loop & Regra do Modelo

Avaliando o script síncrono principal na Call Stack.

Call Stack / Pilha de Chamadas (LIFO)1
<main script>STACK
Fila de Microtasks / Job Queue (FIFO)0
(Nenhuma microtask pendente)
Fila de Tarefas / Macrotasks (FIFO)0
(Nenhuma macrotask pendente)
Web APIs & Temporizadores0
(Nenhum temporizador ativo)
Saída do Console
(Nenhum log impresso até o momento)

Como funciona

  1. Informe os dados

    Preencha os valores, cole o texto ou envie o arquivo que esta ferramenta usa.

  2. Veja o resultado na hora

    A maioria das ferramentas atualiza enquanto você digita; algumas usam um único botão. De qualquer forma, o resultado aparece aqui mesmo.

  3. Use o resultado

    Copie, baixe ou compartilhe o que a ferramenta gerar — o controle é sempre seu.

Privacidade e processamento — Roda localmente no seu navegador. Esta ferramenta não faz upload da sua entrada.

O que é Simulador do Event Loop JavaScript?

O Simulador do Event Loop JavaScript modela a ordem de execução de instruções síncronas, jobs de Promise e queueMicrotask, callbacks de setTimeout, requestAnimationFrame e process.nextTick do Node.js sem executar o código.

ENTENDA A FERRAMENTA

Como funciona o simulador do event loop do JavaScript

Escolha um preset, monte uma sequência ou informe instruções JavaScript compatíveis para inspecionar passo a passo um modelo determinístico da pilha e das filas de tarefas.

As regras de ordem representadas pelo modelo

  • Todo código síncrono roda primeiro, de cima para baixo.
  • No exemplo de Node.js, callbacks de process.nextTick rodam antes da fila normal de Promise e queueMicrotask.
  • Callbacks de Promise .then e queueMicrotask são esvaziados antes do próximo callback de temporizador neste modelo.
  • Temporizadores são ordenados pelo atraso informado, preservando a ordem do código em empates; o preset de animação também mostra a fase separada de callback antes da renderização usada pelo modelo.

Como usar

  • Comece por um preset ou adicione instruções no Construtor Visual e escolha o tipo de tarefa de cada uma.
  • Defina um atraso não negativo em milissegundos para tarefas setTimeout e adicione trabalho aninhado quando um callback agenda outra instrução.
  • Use os controles de reprodução e a visualização das filas para acompanhar os estados, ou abra a tabela para ver a ordem final modelada.
  • Copie o JavaScript normalizado, a saída simulada ou o rastreamento completo para comparar o resultado em outro lugar.

O que o simulador simplifica de propósito

O editor reconhece os padrões de instrução compatíveis e os transforma em rótulos de um modelo local de ordenação. Ele não executa JavaScript arbitrário, resolve variáveis, faz requisições de rede nem reproduz exceções e valores de retorno.

Os atrasos dos temporizadores definem uma ordem relativa determinística em vez de simular tempo de relógio. requestAnimationFrame depende das oportunidades de renderização de um navegador real, e process.nextTick pertence ao Node.js; por isso, esses presets explicam conceitos de runtimes separados, não uma linha do tempo universal.

Exemplo clássico de ordem

sync, timeout, promise, sync

Logs síncronos rodam primeiro, depois a microtask da promise, depois a macrotask do timeout.

log(1); setTimeout(2); Promise.then(3); log(4) -> 1, 4, 3, 2

Modelo local, sem execução de código

As instruções e os rótulos ficam na memória do navegador nesta página. Eles não são enviados, armazenados pela ferramenta nem executados como JavaScript; somente interações agregadas podem ser contadas pela análise baseada em consentimento.

Perguntas frequentes

Por que o callback da Promise roda antes do setTimeout(fn, 0)?

Porque o ponto de verificação de microtasks esvazia os callbacks de Promise enfileirados antes de o event loop selecionar a próxima tarefa de temporizador. O atraso de 0 ms torna o timer elegível; ele não interrompe a tarefa atual nem suas microtasks.

Isso cobre async/await?

Sim, como uma continuação modelada: o preset de async/await e as linhas compatíveis que contêm await representam o trabalho posterior ao await como microtask. A ferramenta não executa a função assíncrona nem resolve seu valor.

Isso reproduz todos os detalhes de tempo dos navegadores e do Node.js?

Não. A ordem principal do código síncrono e dos pontos de verificação de microtasks é representada, mas o tempo dos timers, as oportunidades de renderização e as fases do Node.js envolvem detalhes fora deste modelo determinístico. Leia os presets de rAF e process.nextTick como exemplos separados de navegador e Node.js.

Como macrotasks com o mesmo atraso são ordenadas?

O simulador ordena macrotasks por atraso e mantém a ordem original em empates, seguindo a ordenação estável usada no modelo.

O Editor de Código JS executa o código que eu colo?

Não. Ele reconhece padrões compatíveis de console.log, setTimeout, Promise/.then, queueMicrotask, requestAnimationFrame, process.nextTick e await e os converte em etapas do modelo. JavaScript não reconhecido é tratado como rótulo, não executado.

Ferramentas relacionadas