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

Question

Accepted Answer

Ambos limitan la frecuencia con la que se ejecuta una función en respuesta a eventos rápidos y repetidos, pero con distintas estrategias de temporización.

- **Debounce**: ejecuta la función solo **después de que la actividad se detenga** durante N ms. Reinicia el temporizador en cada llamada. → "espera hasta que terminen".
- **Throttle**: ejecuta la función **como máximo una vez cada N ms** durante actividad continua. → "ejecuta a un ritmo constante".

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## Implementación de debounce

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## Implementación de throttle

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## Cuándo usar cada uno

- **Debounce**: búsqueda a medida que se escribe, guardado automático, fin de redimensionamiento, validar después de que el usuario deja de escribir — quieres el valor *final*.
- **Throttle**: handlers de scroll, mousemove, drag, limitación de tasa — quieres actualizaciones *periódicas* mientras la acción está en curso.

## Por qué es importante

Ambos evitan disparar trabajo costoso (llamadas a API, recálculo de layout) cientos de veces por segundo, lo cual es una técnica clave de rendimiento en el front-end.

Librerías como lodash ofrecen versiones robustas con opciones leading/trailing.