Imagine que você está navegando em um site e, depois de alguns segundos, aparece uma mensagem de boas-vindas. Ou então, um cronômetro começa a rodar marcando o tempo da sua sessão. Esses comportamentos não acontecem “do nada”: por trás deles, existem funções de temporização que controlam quando o código deve ser executado.

No JavaScript, as duas principais funções para lidar com o tempo são setTimeout e setInterval.

Elas permitem que você diga ao navegador:

• “Execute esse código daqui a alguns segundos” (setTimeout), ou
• “Execute esse código repetidamente a cada intervalo de tempo” (setInterval).

Com esses recursos, conseguimos criar desde simples mensagens temporizadas até cronômetros, notificações automáticas e sistemas que atualizam informações em tempo real.

Nesta aula, vamos entender em detalhes como essas funções funcionam, quando usá-las, e veremos exemplos práticos explicados passo a passo para que qualquer iniciante em programação consiga acompanhar sem dificuldade.

Bora codar!!

1) O que são?

No JavaScript, setTimeout e setInterval são funções de temporização.

Elas permitem executar um código depois de um tempo (setTimeout) ou repetidamente em intervalos fixos (setInterval).

• setTimeout(func, tempo): executa a função uma única vez, após o tempo especificado em milissegundos.
• setInterval(func, tempo): executa a função repetidamente, a cada intervalo de tempo definido.

2) Por que isso é importante?

Essas funções são usadas para:

• Criar efeitos de espera (ex.: mostrar uma mensagem depois de 3 segundos).
• Construir cronômetros ou contadores.
• Executar tarefas automáticas em intervalos (ex.: atualizar dados de um site a cada 5s).
• Criar animações simples (embora requestAnimationFrame seja mais recomendado para animações complexas).

3) setTimeout — Executa uma vez

Exemplo prático

console.log("Carregando...");

setTimeout(() => {
  console.log("Bem-vindo ao site!");
}, 3000);

Explicação linha por linha:

1. console.log("Carregando..."); → Mensagem exibida imediatamente.
2. setTimeout(() => { ... }, 3000); → Agenda a execução da função dentro das chaves após 3000 ms (3 segundos).
3. Depois de 3 segundos, aparece no console: “Bem-vindo ao site!”.

Cancelando um setTimeout

const id = setTimeout(() => {
  console.log("Isso não vai aparecer.");
}, 2000);

clearTimeout(id); // cancela a execução antes dos 2 segundos

4) setInterval — Executa várias vezes

Exemplo prático

let contador = 1;

const id = setInterval(() => {
  console.log(`Segundos passados: ${contador}`);
  contador++;

  if (contador > 5) {
    clearInterval(id); // para quando chega em 5
    console.log("Contagem encerrada.");
  }
}, 1000);

Explicação linha por linha:

1. let contador = 1; → Variável para contar os segundos.
2. const id = setInterval(() => { ... }, 1000); → A função é executada a cada 1000ms (1s).
3. console.log(...); → Mostra o tempo no console.
4. contador++; → Aumenta o valor do contador a cada execução.
5. if (contador > 5) { clearInterval(id); ... } → Depois de 5 execuções, paramos o intervalo.

5) Diferença entre os dois

6) Exemplos do dia a dia

• Mensagem de boas-vindas com atraso → setTimeout
• Notificação que pisca a cada 2s → setInterval
• Cronômetro regressivo → setInterval
• Simular carregamento → setTimeout

7) Exercícios para praticar

1. Mensagem atrasada: Crie um setTimeout que exibe “Hora de estudar JavaScript!” após 2 segundos.
2. Contagem regressiva: Faça um setInterval que conte de 10 até 0, e ao chegar em 0 exiba “Fim!” e pare.
3. Piscar texto: Use setInterval para alternar entre mostrar e esconder uma palavra no console a cada 1 segundo.

Conclusão da Aula

Chegamos ao fim da nossa aula sobre setTimeout e setInterval.

Vimos que essas funções são ferramentas simples, mas muito poderosas, quando queremos controlar o tempo de execução no JavaScript.

• O setTimeout serve para agendar uma ação que vai acontecer uma única vez após um certo período.
• O setInterval é ideal quando precisamos que uma ação se repita em intervalos regulares de tempo.
• Também aprendemos como cancelar esses temporizadores (clearTimeout e clearInterval) para evitar que o código continue rodando quando não precisamos mais.

Com esse conhecimento, você já consegue criar desde mensagens programadas até cronômetros e contadores.

Esses conceitos são a base para entendermos algo ainda maior: como o JavaScript lida com tarefas assíncronas.

☕ https://github.com/guilherme-silvam/js-aulas-guilhermemachadodev/tree/main/aula-16-guilhermemachadodev