Debounce frente a throttle: implementación manual
Construya pequeñas utilidades de debounce y throttle. Practique las variantes trailing y leading, y sepa cuándo elegir cada una.
Debounce frente a throttle: implementación manual es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 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.
Descripción general
Objetivo: controlar los eventos frecuentes.
- Debounce: esperar a que haya calma y ejecutar una vez
- Throttle: ejecutar como máximo una vez por intervalo
- Llamadas iniciales y finales
- Funciones auxiliares pequeñas y legibles
Debounce (trailing)
El debounce trailing reinicia un temporizador con cada evento y se ejecuta una vez cuando la actividad se calma.
// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
let t = null;
return function (...args) {
clearTimeout(t);
t = setTimeout(function () {
fn.apply(null, args);
}, wait);
};
}
// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
console.log("debounced:", msg);
}, 10);
for (let i = 0; i < 5; i++) {
setTimeout(function () {
debouncedLog("final after bursts");
}, i * 3);
}
Debounce (leading)
El debounce leading se ejecuta de inmediato y después bloquea las repeticiones hasta que termina el periodo de calma.
// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
let t = null;
return function (...args) {
if (t === null) {
fn.apply(null, args);
}
clearTimeout(t);
t = setTimeout(function () {
t = null;
}, wait);
};
}
// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
console.log("leading:", x);
}, 12);
for (let i = 0; i < 4; i++) {
setTimeout(function () {
firstTap("first-then-wait");
}, i * 3);
}
Throttle (leading)
Throttle limita las llamadas a una por periodo de tiempo y descarta las adicionales.
// Throttle (leading): at most once per interval
function throttle(fn, wait) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last >= wait) {
last = now;
fn.apply(null, args);
}
};
}
// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
console.log("throttled:", n);
}, 10);
for (let i = 0; i < 10; i++) {
setTimeout(function () {
throttled(i);
}, i * 2);
}
Throttle (trailing)
El throttle trailing garantiza que al final del periodo todavía reciba el valor más reciente.
// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
let last = 0;
let timer = null;
let queuedArgs = null;
function invoke(args) {
last = Date.now();
fn.apply(null, args);
}
return function (...args) {
const now = Date.now();
const remaining = wait - (now - last);
if (remaining <= 0) {
// Window passed: run now
clearTimeout(timer);
timer = null;
queuedArgs = null;
invoke(args);
} else {
// Queue the latest args to run at the end of the window
queuedArgs = args;
clearTimeout(timer);
timer = setTimeout(function () {
timer = null;
if (queuedArgs) {
invoke(queuedArgs);
queuedArgs = null;
}
}, remaining);
}
};
}
// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
console.log("trail:", x);
}, 10);
for (let i = 0; i < 6; i++) {
setTimeout(function () {
trail("v" + i);
}, i * 3);
}
¿Cuándo usar cada uno?
Elección:
- Debounce: búsqueda mientras se escribe o cambio de tamaño; ejecútelo después de que el usuario termine.
- Throttle: desplazamiento o arrastre; limite las llamadas para mantener un ritmo estable.
- Use leading para una respuesta inmediata y trailing para capturar el valor final.
Cuestionario sobre debounce y throttle
Comprobación rápida: limitar las llamadas por periodo.
Repaso
Repaso: Ha escrito un debounce trailing y otro leading, un throttle leading sencillo y un throttle trailing ligero. Elija debounce para «después de que el usuario termine» y throttle para mantener un «ritmo estable».
Preguntas frecuentes
¿La lección «Debounce frente a throttle: implementación manual» es gratis?
Sí — el texto completo de «Debounce frente a throttle: implementación manual» 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 «Debounce frente a throttle: implementación manual»?
Construya pequeñas utilidades de debounce y throttle. Practique las variantes trailing y leading, y sepa cuándo elegir cada una. 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 2 de 3.
¿Cuánto tiempo toma la lección «Debounce frente a throttle: implementación manual»?
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
- setTimeout, setInterval y deriva de los temporizadores
- Debounce frente a throttle: implementación manual
- Temporización de animaciones: introducción con bucles basados en el tiempo