Como funciona o ciclo de eventos (event loop) na API…

O ciclo de eventos em JavaScript (no contexto do navegador web) é um mecanismo que permite executar operações assíncronas sem bloquear o thread principal de execução. É composto por vários componentes:

Heap (Heap): Área de memória onde os objetos são armazenados.
Pilha de chamadas (Call Stack): Estrutura de dados LIFO que rastreia a execução de funções síncronas.
Web APIs: Fornecidas pelo navegador (DOM, AJAX, setTimeout, setInterval, Event Listeners, etc.). Elas não fazem parte do motor JavaScript.
Fila de callbacks (Callback Queue) / Fila de tarefas (Task Queue): Fila de mensagens para executar tarefas assíncronas.
Fila de microtarefas (Microtask Queue): Fila prioritária para microtarefas (Promise.then(), async/await, queueMicrotask). É executada antes da fila de tarefas.
Event Loop (Ciclo de eventos): Verifica continuamente a pilha de chamadas e a fila. Se a pilha estiver vazia, move o primeiro manipulador da fila de microtarefas para a pilha. Após esvaziar a fila de microtarefas, move o primeiro manipulador da fila de tarefas para a pilha.

O processo funciona assim:

O código síncrono é executado e as funções são colocadas na pilha de chamadas.
Quando uma operação assíncrona é encontrada (por exemplo, setTimeout), ela é transferida para a Web API correspondente. A execução do código síncrono continua.
A Web API realiza a operação em segundo plano.
Quando a operação assíncrona termina, o manipulador (callback) dessa operação é colocado na fila de tarefas (para operações assíncronas normais) ou na fila de microtarefas (para promessas).
O Event Loop verifica continuamente a pilha de chamadas. Se estiver vazia:
- Verifica a fila de microtarefas. Se houver manipuladores, eles são movidos para a pilha de chamadas para execução, até que a fila de microtarefas esteja vazia.
- Depois, verifica a fila de tarefas. Se houver manipuladores, move o primeiro para a pilha de chamadas para execução.
Esse processo se repete, permitindo executar operações assíncronas sem bloquear o thread principal.

Exemplo com setTimeout:

// Este código é executado na pilha de chamadas
console.log('Start');

// setTimeout - Web API. O callback é colocado na fila de tarefas após 0ms.
// A execução real pode ser atrasada devido ao ciclo de eventos.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Este código é executado na pilha de chamadas após setTimeout
console.log('End');

// Saída:
// Start
// End
// Timeout

Exemplo com promessas:

// Executa na pilha de chamadas
console.log('A');

// Promessa. O callback de then() é colocado na fila de microtarefas
Promise.resolve().then(() => {
  console.log('B');
});

// Executa na pilha de chamadas
console.log('C');

// Saída:
// A
// C
// B

Como funciona o ciclo de eventos (event loop) na API web?