Al usar JavaScript, un exceso de activadores de eventos puede ralentizar su aplicación. Por ejemplo, un usuario que cambia el tamaño de la ventana del navegador o escribe en una barra de búsqueda puede hacer que los eventos se activen repetidamente en poco tiempo, lo que afecta el rendimiento de la aplicación.

Aquí es donde la aceleración y la eliminación de rebotes vienen al rescate. Le ayudan a administrar la frecuencia con la que se llaman sus funciones cuando se trata de eventos que se activan con demasiada frecuencia.

? ¿Qué es la limitación?

La limitación limita la frecuencia con la que se puede ejecutar una función. Incluso si un evento ocurre repetidamente, una función limitada solo se ejecutará como máximo una vez cada intervalo de tiempo especificado.

Ejemplo:

Imagina que estás en un concierto y estás tomando fotos. Pero decides tomar sólo una foto cada 5 minutos (sin importar lo emocionante que sea la actuación). Eso es como estrangular. No importa cuántos momentos dignos de fotografiar sucedan, cumplirás la regla de una foto cada 5 minutos.

En JavaScript, esto podría aplicarse cuando desea realizar un seguimiento de la frecuencia con la que el usuario se desplaza hacia abajo en una página, pero no desea que la función se active cada milisegundo. Con la limitación, usted controla la frecuencia con la que se ejecuta esa función.

Ejemplo de código:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

En este ejemplo, la función handleScroll solo se ejecutará una vez cada 2 segundos (2000 milisegundos) sin importar qué tan rápido o con frecuencia se desplace el usuario.

? ¿Qué es el rebote?

La eliminación de rebotes garantiza que una función solo se llame después de un cierto período de inactividad. Si el evento continúa activándose, la función seguirá reiniciando el temporizador y solo se activará después de que el evento se detenga.

Ejemplo:

Imagina que estás en un chat grupal y estás escribiendo un mensaje. No querrás enviar una notificación a tus amigos cada vez que presiones una tecla. En su lugar, desea esperar hasta que haya dejado de escribir durante unos segundos antes de enviar una notificación "escribiendo...". Eso es antirrebote: enviar una notificación solo después de una pausa al escribir.

En JavaScript, la eliminación de rebotes se utiliza a menudo cuando los usuarios escriben en un cuadro de búsqueda. En lugar de enviar una consulta de búsqueda después de cada pulsación de tecla, puedes esperar hasta que el usuario deje de escribir por un momento antes de realizar la búsqueda.

Ejemplo de código:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

En este ejemplo, la función handleInput solo se ejecutará después de que el usuario haya dejado de escribir durante 500 milisegundos.

? ¿Cuándo utilizar la aceleración o la eliminación de rebotes?

⚡️ Utilice la limitación cuando desee controlar la frecuencia con la que se llama a una función a lo largo del tiempo. Bueno para eventos como:

=> Desplazamiento
=> Cambiar el tamaño de la ventana
=> Movimientos del mouse

⚡️ Utilice Antirrebote cuando desee asegurarse de que solo se llame a una función después de que un evento haya terminado de activarse. Bueno para eventos como:

=> Escribiendo en una barra de búsqueda
=> Envíos de formularios
=> Cambiar el tamaño de la ventana (para acciones como ajustes de diseño)

Conclusión ✅

La limitación y la eliminación de rebotes son excelentes técnicas para mejorar el rendimiento y la capacidad de respuesta de sus aplicaciones JavaScript.

Te ayudan a administrar la frecuencia con la que se ejecutan las funciones, evitando que tu aplicación se vea abrumada por demasiados eventos.

Al comprender cuándo y cómo usarlos, ¡puedes mantener tu código funcionando sin problemas incluso en las aplicaciones más ocupadas!

¡Feliz codificación! ?