Debounce vs throttle, visualizado

Visualizador de debounce vs throttle

Debounce vs throttle en JavaScript, visualizado | We.Inc

Mueve el puntero sobre el panel y observa en una sola línea de tiempo los eventos originales, las llamadas con debounce y las llamadas con throttle. Funciones de debounce y throttle para copiar, además de hooks de React.

Debounce espera a que las llamadas se detengan durante un tiempo fijo y luego se ejecuta una vez, lo que encaja con cuadros de búsqueda y el guardado automático. Throttle se ejecuta como máximo una vez por intervalo mientras siguen llegando llamadas, lo que encaja con el scroll, el redimensionado y el seguimiento del puntero. Ambos reciben una función y un retardo en milisegundos y devuelven una función envuelta que llamas en su lugar.

Cuál usar

Situación
Usar
Por qué

Búsqueda mientras escribes
Debounce, unos 300 ms
Una sola petición cuando la persona hace una pausa

Guardado automático de un formulario
Debounce, unos 1000 ms
Guarda una vez cuando la escritura se calma

Posición de scroll o barra de progreso
Throttle, unos 100 ms
Actualizaciones regulares durante el scroll

Cálculos de diseño al redimensionar la ventana
Throttle o debounce
Throttle para respuesta en vivo, debounce para el tamaño final

Evitar dobles clics al enviar
Debounce con flanco inicial
El primer clic cuenta, las repeticiones se ignoran

Las dos palabras se confunden porque ambas reducen la frecuencia con la que se ejecuta una función. El panel de abajo muestra la diferencia en una línea de tiempo compartida: cada evento original como una marca fina, y cada llamada con debounce y cada llamada con throttle como un punto. Cambia el retardo y el patrón cambia con él.

Mueve el puntero o el dedo por el panel, o mantén pulsada una tecla mientras tiene el foco.
Los eventos originales llenan el carril superior. El carril central muestra las llamadas con debounce y el inferior las llamadas con throttle.
Arrastra el control del retardo y repite para ver cómo el intervalo cambia ambos patrones.
Copia las funciones simples o los hooks de React de abajo para tu propio código.

Crea la función con debounce una sola vez. Crear una nueva en cada render de React reinicia su temporizador, así que nunca se ejecuta.
Cancela las llamadas pendientes cuando un componente se desmonta, o una llamada tardía puede actualizar algo que ya no existe.
Para animaciones ligadas al scroll, requestAnimationFrame suele superar a un intervalo de throttle fijo.
Aplica debounce a la parte costosa, como la petición de red, no al propio estado del input, o escribir se sentirá lento.

Preguntas frecuentes

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

Debounce reinicia su temporizador en cada llamada y solo se ejecuta cuando las llamadas se detienen. Throttle ignora las llamadas dentro de la ventana actual, pero vuelve a ejecutarse en cuanto la ventana termina, así que se dispara de forma constante durante una ráfaga larga.

¿Qué son los flancos inicial y final?

El flanco inicial (leading) es la primera llamada de una ráfaga; el flanco final (trailing) es el momento en que termina el intervalo de la ráfaga. Un debounce trailing se ejecuta después de la pausa, uno leading se ejecuta de inmediato y luego ignora las llamadas hasta la pausa. Los throttles pueden dispararse en cualquiera de los dos flancos o en ambos.

¿Necesito lodash para hacer debounce?

No. Las funciones de esta página ocupan pocas líneas cada una. Una versión de biblioteca añade opciones como maxWait, cancel y flush, que son prácticas pero fáciles de añadir tú mismo si solo necesitas una de ellas.

¿Cuánto debe durar el retardo?

No hay un único número correcto. Empieza con unos 300 milisegundos para la escritura y 100 para el scroll o el puntero, y luego ajusta a ojo. Más corto se siente más ágil, pero ahorra menos trabajo.

Cómo funciona debounce

Cada llamada borra el temporizador pendiente y arranca uno nuevo. Solo cuando el temporizador sobrevive al retardo completo se ejecuta la función original, con los argumentos de la última llamada.
Eso hace que debounce sea perfecto para captar la intención: no te importa cada pulsación, solo la palabra que alguien terminó de escribir. El precio es la latencia, ya que no ocurre nada hasta la pausa.

Cómo funciona throttle

Un throttle recuerda cuándo se ejecutó por última vez. Una llamada dentro del intervalo se descarta o, en la versión trailing, se guarda para ejecutarse cuando termine el intervalo. Las llamadas fuera del intervalo se ejecutan al instante.
Úsalo cuando el usuario deba ver una respuesta continua, como una cabecera fija que reacciona al scroll, pero ejecutar en cada evento sería un desperdicio.

Versiones en JavaScript puro

debounce(fn, wait)

Flanco final. cancel() descarta cualquier llamada pendiente.

throttle(fn, wait)

Se ejecuta en el flanco inicial y una vez más al final de la ventana si llegaron llamadas mientras tanto, así nunca se pierde el último valor.

Hooks de React

useDebouncedCallback

Mantiene un único temporizador durante la vida del componente, siempre invoca el callback más reciente y borra el temporizador al desmontarse.

useThrottledValue

Devuelve una copia de un valor que cambia rápido y que se actualiza como máximo una vez por intervalo.

Eventos originales

Con debounce ({n} ms)

Con throttle ({n} ms)

Visualizador

Muévete sobre el panel. Las marcas finas son eventos originales; los puntos son llamadas que de verdad se ejecutaron tras aplicar debounce o throttle.

Retardo: {n} ms

Panel de eventos: mueve el puntero aquí o mantén pulsada una tecla

Muévete aquí (o pon el foco y mantén pulsada una tecla)

La línea de tiempo muestra los últimos seis segundos; los números cuentan las llamadas en esa ventana.