0Pricing
JavaScript Academy · Aula

setTimeout, setInterval e desvio dos temporizadores

Agende tarefas únicas e repetitivas com setTimeout/setInterval e aprenda uma técnica simples para reduzir o desvio dos temporizadores

setTimeout, setInterval e desvio dos temporizadores é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.

Introdução aos temporizadores

Objetivo: Agendar tarefas de forma organizada.

  • setTimeout: executar mais tarde (uma vez)
  • setInterval: executar repetidamente
  • Deriva: por que os temporizadores saem do ritmo
  • Correção simples da deriva
setTimeout, setInterval e desvio dos temporizadores — ilustração 1

setTimeout — execução única

setTimeout(fn, ms) é executado uma vez depois do atraso (é um tempo mínimo, não exato).

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout, setInterval e desvio dos temporizadores — ilustração 2

setInterval — repetição

setInterval repete automaticamente; use clearInterval(id) para parar.

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout, setInterval e desvio dos temporizadores — ilustração 3

Veja a deriva acontecer

Os intervalos reais variam; o trabalho, a carga do dispositivo e o loop de eventos causam drift.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout, setInterval e desvio dos temporizadores — ilustração 4

Agendamento alinhado

Alinhe-se a um tempo expected em movimento: calcule o próximo atraso a partir dele para evitar o acúmulo de erro.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout, setInterval e desvio dos temporizadores — ilustração 5

Dicas e lista de verificação

Dicas:

  • Sempre use clearInterval quando terminar.
  • Prefira laços de setTimeout alinhados para manter uma cadência constante.
  • Mantenha curtas as funções de retorno dos temporizadores para reduzir a deriva.
setTimeout, setInterval e desvio dos temporizadores — ilustração 6

Questionário sobre correção da deriva

Verificação rápida: Redução da deriva.

setTimeout, setInterval e desvio dos temporizadores — ilustração 7

Recapitulação

Recapitulação: Use setTimeout para execuções únicas, setInterval para repetições (lembrando-se de limpá-lo) e reduza o drift alinhando as próximas execuções aos tempos esperados.

setTimeout, setInterval e desvio dos temporizadores — ilustração 8

Perguntas Frequentes

A aula “setTimeout, setInterval e desvio dos temporizadores” é grátis?

Sim — o texto completo de “setTimeout, setInterval e desvio dos temporizadores” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.

O que vou aprender em “setTimeout, setInterval e desvio dos temporizadores”?

Agende tarefas únicas e repetitivas com setTimeout/setInterval e aprenda uma técnica simples para reduzir o desvio dos temporizadores Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “setTimeout, setInterval e desvio dos temporizadores”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. setTimeout, setInterval e desvio dos temporizadores
  2. Debounce versus throttle — implementados manualmente
  3. Temporização de animações — introdução a loops baseados em tempo
← Voltar para JavaScript Academy