Diferencias y Aplicaciones de Debounce y Throttle

En el desarrollo frontend, para mejorar el rendimiento y la experiencia del usuario, a menudo necesitamos controlar eventos que se activan con frecuencia. Debounce y throttle son dos técnicas comunes para lograr esto. Este artículo describe en detalle los conceptos de debounce y throttle, sus diferencias y sus escenarios de aplicación en el desarrollo práctico.

Debounce

Debounce es una técnica para controlar la frecuencia de ejecución de funciones. Cuando un evento se activa continuamente, debounce retrasará la ejecución de la función hasta que el evento deje de activarse durante un período de tiempo.

Ejemplo de Código

1
function debounce(func, wait) {
2
  let timeout;
3
  return function (...args) {
4
    clearTimeout(timeout);
5
    timeout = setTimeout(() => {
6
      func.apply(this, args);
7
    }, wait);
8
  };
9
}
10

11
// Aplicando debounce
12
const handleResize = debounce(() => {
13
  console.log("Ventana redimensionada");
14
}, 300);
15

16
window.addEventListener("resize", handleResize);

En el código anterior, la función handleResize solo se ejecutará una vez que el tamaño de la ventana haya dejado de cambiar durante 300 milisegundos.

Throttle

Throttle también es una técnica para controlar la frecuencia de ejecución de funciones, pero a diferencia de debounce, throttle garantiza que la función se ejecute solo una vez en un intervalo de tiempo determinado, independientemente de cuántas veces se active el evento durante ese intervalo.

Ejemplo de Código

1
function throttle(func, delay) {
2
  let lastCall = 0;
3
  return (...args) => {
4
    const now = new Date().getTime();
5
    if (now - lastCall < delay) {
6
      return;
7
    }
8
    lastCall = now;
9
    return func(...args);
10
  };
11
}
12

13
// Aplicando throttle
14
const handleScroll = throttle(() => {
15
  console.log("Ventana desplazada");
16
}, 300);
17

18
window.addEventListener("scroll", handleScroll);

En el código anterior, la función handleScroll se ejecutará cada 300 milisegundos durante el desplazamiento de la ventana.

Diferencias entre Debounce y Throttle

• Forma de Activación:

  • Debounce: La función se ejecuta después de que el evento ha dejado de activarse durante un período de tiempo.
  • Throttle: La función se ejecuta una vez en un intervalo de tiempo determinado.

• Escenarios de Aplicación:

  • Debounce: Adecuado para situaciones donde se necesita procesar después de que el usuario ha dejado de ingresar o de realizar una acción, como la autocompletación de búsqueda, la validación de formularios.
  • Throttle: Adecuado para situaciones donde se necesita ejecutar la función una vez en un intervalo de tiempo determinado, como eventos de desplazamiento de la ventana, prevención de múltiples clics en botones.

Escenarios de Aplicación

Escenarios de Aplicación de Debounce

1. Autocompletación de Búsqueda: No enviar la solicitud inmediatamente cuando el usuario está ingresando, sino enviar después de que el usuario haya dejado de ingresar.
2. Validación de Formularios: Prevenir la activación frecuente de la lógica de validación mientras el usuario está completando el formulario, solo validarlo después de que el usuario haya dejado de ingresar.
3. Redimensionamiento de Ventanas: Prevenir la activación frecuente de la lógica de redimensionamiento mientras el usuario está cambiando el tamaño de la ventana.

Escenarios de Aplicación de Throttle

1. Eventos de Desplazamiento de Ventanas: Prevenir la activación frecuente de la lógica de desplazamiento, como la carga perezosa o el desplazamiento infinito.
2. Prevención de Múltiples Clics en Botones: Prevenir que el usuario haga clic en un botón varias veces en un corto período de tiempo, lo que podría resultar en múltiples solicitudes.
3. Lógica de Actualización en Animaciones y Juegos: Asegurar que la lógica de actualización se ejecute solo una vez en un intervalo de tiempo determinado, previniendo problemas de rendimiento.

Conclusión

Debounce y throttle son técnicas comunes en la optimización del rendimiento frontend, controlando la frecuencia de ejecución de funciones para evitar problemas de rendimiento causados por eventos que se activan con frecuencia. Debounce es adecuado para escenarios donde la función se ejecuta después de que el evento ha dejado de activarse, mientras que throttle es adecuado para escenarios donde la función se ejecuta una vez en un intervalo de tiempo determinado. Comprender y aplicar estas dos técnicas correctamente puede mejorar significativamente el rendimiento y la experiencia del usuario en una aplicación.