0Pricing
JavaScript Academy · Lección

setTimeout, setInterval y deriva de los temporizadores

Programe tareas puntuales y repetitivas con setTimeout/setInterval y aprenda una técnica sencilla para reducir la deriva de los temporizadores.

setTimeout, setInterval y deriva de los temporizadores es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.

Introducción a los temporizadores

Objetivo: programar tareas de forma ordenada.

  • setTimeout: ejecutar más tarde (una vez)
  • setInterval: ejecutar repetidamente
  • Deriva: por qué los temporizadores se desajustan
  • Corrección sencilla de la deriva
setTimeout, setInterval y deriva de los temporizadores — ilustración 1

setTimeout — una sola ejecución

setTimeout(fn, ms) se ejecuta una vez después del tiempo de espera (es un tiempo mínimo, no exacto).

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

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

console.log("C: scheduled");
setTimeout, setInterval y deriva de los temporizadores — ilustración 2

setInterval — repetición

setInterval se repite automáticamente; use clearInterval(id) para detenerlo.

// 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 y deriva de los temporizadores — ilustración 3

Observe cómo aparece la deriva

Los intervalos reales varían; el trabajo, la carga del dispositivo y el bucle de eventos provocan deriva.

// 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 y deriva de los temporizadores — ilustración 4

Programación alineada

Alinee la ejecución con un tiempo esperado que avance: calcule el siguiente retraso a partir de él para evitar que se acumule el error.

// 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 y deriva de los temporizadores — ilustración 5

Consejos y lista de comprobación

Consejos:

  • Use siempre clearInterval cuando termine.
  • Prefiera bucles de setTimeout alineados para mantener una cadencia estable.
  • Mantenga breves las funciones de callback de los temporizadores para reducir la deriva.
setTimeout, setInterval y deriva de los temporizadores — ilustración 6

Cuestionario sobre la corrección de la deriva

Comprobación rápida: reducción de la deriva.

setTimeout, setInterval y deriva de los temporizadores — ilustración 7

Repaso

Repaso: Use setTimeout para ejecuciones únicas y setInterval para repeticiones (recuerde detenerlo), y reduzca la deriva alineando las siguientes ejecuciones con los tiempos esperados.

setTimeout, setInterval y deriva de los temporizadores — ilustración 8

Preguntas frecuentes

¿La lección «setTimeout, setInterval y deriva de los temporizadores» es gratis?

Sí — el texto completo de «setTimeout, setInterval y deriva de los temporizadores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Qué aprenderé en «setTimeout, setInterval y deriva de los temporizadores»?

Programe tareas puntuales y repetitivas con setTimeout/setInterval y aprenda una técnica sencilla para reducir la deriva de los temporizadores. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «setTimeout, setInterval y deriva de los temporizadores»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. setTimeout, setInterval y deriva de los temporizadores
  2. Debounce frente a throttle: implementación manual
  3. Temporización de animaciones: introducción con bucles basados en el tiempo
← Volver a JavaScript Academy