Mejorando el rendimiento de tu web: El poder de Debounce

Existen muchas maneras en las que se puede mejorar el rendimiento de un sitio. En esta ocasión quiero hablarte sobre cómo la función debounce puede ayudarte con esto. Trabajando en la corrección de un bug me tope con este tipo de función. Ya había escuchado anteriormente sobre qué era pero nunca había tenido la oportunidad de crear una.

En el contexto de una búsqueda en tiempo real, esta función permite retrasar la ejecución de una llamada al servidor hasta que el usuario haya dejado de escribir durante un período de tiempo especificado.

En su forma más simple, la función debounce acepta dos argumentos: la función que deseas ejecutar y un tiempo de retardo opcional. El primero es la función que quieres ejecutar y el segundo(que puede ser opcional) es el tiempo que debounce tardará para ejecutar la función.

function debounce(callback, delay = 1000) {
  let timeout;
  
  return (...args) => {
    clearTimeout(timeoutId);

    timeout = setTimeout(() => {

      callback(...args);

    }, delay);
  };
}

Internamente la función trabaja así:

• Declara una variable llamada timeoutId que se utilizará para rastrear el identificador de tiempo (timer ID) del temporizador que se configura con setTimeout. Inicialmente, timeoutId es undefined.
• Devuelve una función anónima que toma cualquier número de argumentos. Esta función anónima se ejecutará cada vez que llamemos a la función debounce. Los argumentos de la función anónima se capturan como un arreglo llamado args.
• clearTimeout(timeoutId); cancela cualquier temporizador pendiente previo. Si hay un temporizador en espera (un temporizador anterior que aún no ha finalizado), se cancela antes de configurar uno nuevo. Esto es esencial para garantizar que solo se ejecute una vez la función callback después del tiempo de retraso, incluso si se hacen múltiples llamadas a la función debounce en rápida sucesión.
• timeoutId = setTimeout(() => { configura un nuevo temporizador utilizando la función setTimeout. Se establece una función anónima que se ejecutará después del tiempo de retardo especificado (delay).
• Dentro de la función anónima del setTimeout, se llama a la función callback con los argumentos capturados en la función anónima principal. Esto permite ejecutar la función callback con los argumentos proporcionados después del tiempo de retraso.

Supongamos que intentas encontrar algo en un sitio de películas como Netflix, esta información se encuentra en el servidor. Si se hiciera una llamada al servidor por cada letra que ingresa en el buscador correríamos el riesgo de hacer llamadas excesivas mientras encuentras tu película o serie. Si alguien estuviera buscando la película ‘Matrix’ se haría una búsqueda para todas las películas que empiecen con M, luego una para todas las que empiecen con Ma, después Mat y así sucesivamente.

Esto es malo por varias razones:

• Impacto negativo en la experiencia del usuario con conexiones de red lentas.
• Incrementa el consumo innecesario de datos, especialmente en planes de datos limitados.
• Puede resultar en facturas más altas de servicios en la nube como AWS, Google Cloud o Azure 😅

Tú después de pagar AWS por no usar debouncing

Lo más probable es que el usuario ya sabe qué es lo que está buscando. Si está buscando ‘Matrix’ no tiene sentido que se haga una llamada al servidor por cada letra. La función debounce permite que se llame al servidor solo si el usuario dejó de escribir en el buscador. De esta manera se trae información cuando ya hay algo que buscar.

function debounce(callback, delay = 1000) {
  let timeoutId;

  return (...args) => {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

// Función que deseamos ejecutar después del retraso
function realizarBusqueda(consulta) {
  console.log(`Realizando búsqueda para: ${consulta}`);
}

// Crear una versión "debounced" de la función de búsqueda
const debounceRealizarBusqueda = debounce(realizarBusqueda, 1000); // 1 segundo de retardo

// Simulación de llamadas a la función de búsqueda
debounceRealizarBusqueda('Matrix');
debounceRealizarBusqueda('Inception');
debounceRealizarBusqueda('Interstellar');

// Después de un segundo desde la última llamada, la función de búsqueda se ejecutará solo una vez para 'Interstellar'.

En conclusión, la función debounce es una herramienta valiosa para mejorar el rendimiento de tu sitio web al reducir las llamadas innecesarias al servidor, ahorrar ancho de banda y optimizar costos en la nube. Al integrar esta técnica en tu código, puedes brindar a tus usuarios una experiencia más rápida y eficiente.

Estoy intentando escribir más sobre tecnología, libros y productividad. Después de todo, aprender es enseñar. Me motivaría bastante si me das un follow. También podemos seguirnos en twitter(X) @moilu6 donde escribo principalmente mis quejas del día a día 😅. Si llegaste hasta aquí, muchas gracias.