Na aula anterior, aprendemos que o JavaScript possui duas filas principais para tarefas assíncronas:

  • Microtask Queue
  • Macrotask Queue

Agora chegou a hora de ver isso acontecendo com exemplos reais, exatamente como você encontra no dia a dia.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Identificar microtasks e macrotasks no código
  • Prever a ordem de execução no console
  • Entender como Promises, timeouts e eventos interagem
  • Evitar bugs causados por ordem inesperada de execução

Exemplo 1 — Promise vs setTimeout

Esse é o exemplo mais clássico — e mais importante. 

 
  console.log("Início");
  setTimeout(() => 
  {
    console.log("Macrotask");
  }, 0);
  Promise.resolve().then(() => 
  {
    console.log("Microtask");
  });
  console.log("Fim");

Antes de rodar, tente prever a ordem. 


   console.log("Início"); // Saída: Início
   console.log("Fim");
   // Saída: Fim
   // Microtasks primeiro
   // Saída: Microtask
   // Depois as macrotasks
   // Saída: Macrotask
Promises sempre têm prioridade sobre setTimeout.

Exemplo 2 — Várias Promises encadeadas

Todas as Promises resolvidas entram na Microtask Queue. 

 
  console.log("Início");
  Promise.resolve()
  .then(() => 
  {
    console.log("Microtask 1");
  })
  .then(() => 
  {
    console.log("Microtask 2");
  });
  console.log("Fim");

 
  console.log("Início"); // Saída: Início
  console.log("Fim");
  // Saída: Fim
  // Microtasks executam em sequência
  // Saída: Microtask 1
  // Saída: Microtask 2

Exemplo 3 — setTimeout dentro de Promise

Aqui vemos microtasks criando macrotasks. 

 
  Promise.resolve().then(() => 
  { 
    console.log("Microtask");
    setTimeout(() => 
    {
      console.log("Macrotask criada pela microtask");
    }, 0);
  });

 
  Promise.resolve().then(() => 
  { 
    console.log("Microtask"); 
  }); // Saída: Microtask
  // Depois que a microtask termina
  // Saída: Macrotask criada pela microtask

Exemplo 4 — Evento de clique (macrotask)

Eventos do DOM entram como macrotasks. 

 
  button.addEventListener("click", () => 
  { 
    console.log("Clique");
    Promise.resolve().then(() => 
    {
      console.log("Microtask do clique");
    });
  });

Ao clicar no botão: 

 
  console.log("Clique"); // Saída: Clique
  console.log("Microtask do clique");
  // Saída: Microtask do clique
Mesmo dentro de eventos, microtasks mantêm prioridade.

Exemplo 5 — Armadilha comum

Misturar muitos then pode gerar comportamentos inesperados. 

 
  setTimeout(() => 
  { 
    console.log("Timeout");
    Promise.resolve().then(() => 
    {
      console.log("Microtask dentro do timeout");
    });
  }, 0);

 
  setTimeout(() => 
  { 
    console.log("Timeout"); }); 
    // Saída: Timeout
    // Microtask criada depois
    // Saída: Microtask dentro do timeout

Regra prática para o dia a dia

  • Código síncrono roda primeiro
  • Depois, todas as microtasks
  • Por último, uma macrotask por vez
Criar microtasks infinitas pode travar o fluxo de eventos.

Resumo da aula para nunca mais esquecer

  • Microtasks têm prioridade máxima
  • Promises usam microtasks
  • setTimeout e eventos usam macrotasks
  • O Event Loop sempre esvazia microtasks primeiro
  • A ordem do console pode ser prevista

Na próxima aula, vamos aplicar esse conhecimento para entender profundamente Promises e async/await, sem mistério e sem “decorar”.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.