¿Cuál es la diferencia entre debounce y throttle?

Escribes "istanbul" en un buscador. Ocho letras, ocho eventos keyup distintos y ocho solicitudes a la API disparadas. El usuario buscó una sola vez, pero tú consultaste al servidor ocho veces.

La factura

Multiplícalo por diez mil usuarios: ochenta mil solicitudes. Seis de cada siete se tiran a la basura antes incluso de que llegue la respuesta, porque el usuario siguió escribiendo.

Debounce: esperar al último evento

Debounce reinicia el temporizador cada vez que se dispara. Si no llega un nuevo evento dentro del tiempo indicado (por ejemplo, 300 ms), envía la última solicitud una sola vez.

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
 
const search = debounce((query) => fetch(`/api/search?q=${query}`));

Ocho pulsaciones de tecla se reducen a una sola solicitud cuando el usuario deja de escribir.

Throttle: emitir a intervalos regulares

Throttle no espera. Permite ejecutar como máximo una vez dentro del intervalo indicado (por ejemplo, 300 ms) y descarta los eventos que lleguen entre medias.

function throttle(fn, interval = 300) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn(...args);
    }
  };
}

Debounce se fija en el último evento; throttle se fija en el intervalo regular.

Cuál usar y dónde

Una regla sencilla para no confundirlos: si puedes esperar al resultado final, usa debounce: campos de búsqueda, validación de formularios, autoguardado. Si necesitas reducir un flujo continuo de eventos, usa throttle: listeners de scroll, redimensionado de ventana, movimiento del ratón.

Para terminar

No necesitas una librería para ninguno de los dos; una función de ocho líneas hace el trabajo. Lo importante es saber cuál corresponde a cada caso.