Throttle vs Debounce

¿Qué diferencia hay entre Throttle y Debounce? Ejemplos prácticos sobre cuando usar uno u otro.

throttle-vs-debounce

Throttle y debounce son técnicas utilizadas para controlar con qué frecuencia se ejecuta una función, especialmente cuando se manejan eventos que pueden activarse rápidamente, por ejemplo: el desplazamiento del ratón, el redimensionamiento de la pantalla o la escritura con el teclado. Ambas técnicas ayudan a mejorar el rendimiento y a evitar llamadas innecesarias a funciones.

¿Qué diferencia hay entre Throttle y Debounce?

Throttle asegura que una función se ejecute a intervalos regulares, sin importar cuántas veces ocurra el evento. Esto es útil cuando quieres que una función se ejecute periódicamente, como al actualizar algo en la pantalla mientras el usuario está desplazándose con el ratón. El movimiento del ratón puede emitir muchísimos eventos, si para cada evento se dispara una función, la técnica throttle asegura que este evento sólo se lanzará en intervales definidos.

Debounce, por otro lado, espera hasta que el evento haya dejado de activarse durante un tiempo especificado antes de ejecutar la función. Es particularmente útil en escenarios como el manejo de entradas de búsqueda o campos autocompletables, donde deseas esperar a que el usuario termine de escribir antes de realizar una acción, como obtener resultados.

Throttle

La función throttle asegura que una función se ejecuta como mucho una vez en el intervalo especificado sin importar cuantas veces el evento se haya disparado.

En este ejemplo se llamará logThrottle cada 1 segundo aunque el intervalo simulado sea cada 200ms.

function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
// Ejemplo de uso:
function logThrottle() {
console.log("función llamada!");
}
const throttledLog = throttle(logThrottle, 1000); // Llama como mucho una vez cada 1 segundo
// Simular llamadas rápidas
setInterval(throttledLog, 200);

Debounce

La función debounce asegura que una función se ejecute solo después de que haya pasado un tiempo específico desde la última vez que se activó.

function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// Ejemplo de uso:
function logDebounce() {
console.log("función llamada!");
}
const debouncedLog = debounce(logDebounce, 1000); // Se ejecuta 1 segundo después de la última llamada
// Simular llamadas rápidas
let counter = 0;
const interval = setInterval(() => {
debouncedLog();
counter++;
if (counter === 10) clearInterval(interval); // Para después de 10 llamadas rápidas
}, 200); // Se dispara cada 200ms