JavaScript es fantástico para hacer que tus aplicaciones web sean dinámicas e interactivas, pero hay una cosa que no puede manejar bien por sí solo: los eventos frecuentes. Piense en cosas como cambiar el tamaño de la ventana, desplazarse y escribir en los cuadros de búsqueda. Si no se administran adecuadamente, pueden inundar su aplicación con activadores de eventos, lo que ralentiza el proceso y crea una experiencia de usuario lenta. Ahí es donde entran en juego antirrebote y aceleración. Estas técnicas te ayudan a controlar la frecuencia con la que se ejecutan ciertas funciones, manteniendo tu aplicación rápida y receptiva.

En este artículo, desglosaremos antirrebote y aceleración, le mostraremos cuándo usarlos y le brindaremos ejemplos del mundo real para verlos en acción. ¡Profundicemos en estas técnicas esenciales de optimización del rendimiento de JavaScript!

¿Qué es el rebote?

Cómo funciona

Piense en la respuesta antirrebote como si esperara a que alguien termine de hablar antes de comenzar a dar su respuesta. Si alguna vez has estado en una conversación en la que alguien te interrumpe continuamente, ¡entiendes la idea! El concepto clave de antirrebote es que retrasa la ejecución de una función hasta que haya pasado un tiempo específico desde la última vez que se activó el evento.

En términos simples, si un evento (como un usuario escribiendo) sigue sucediendo rápidamente, la eliminación de rebotes garantiza que la función asociada (como una consulta de búsqueda) solo se ejecute después de que el usuario se detenga durante un período determinado.

Cuándo utilizar el rebote

Debe utilizar la función antirrebote cuando desee limitar las llamadas a funciones excesivas causadas por la entrada frecuente del usuario. Un ejemplo clásico es cuando tienes un cuadro de búsqueda y quieres realizar una llamada a la API cada vez que el usuario escribe. Sin rebote, se podría llamar a la API con cada pulsación de tecla, creando una carga innecesaria en su servidor. Con la eliminación de rebotes, la API solo se llama una vez que el usuario deja de escribir.

Antirrebote en el código

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Usage
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('API call made!');
}, 300)); // Only executes 300ms after the last keystroke

En este ejemplo, la función antirrebote garantiza que la llamada a la API solo se realice 300 milisegundos después de que el usuario deje de escribir.

¿Qué es la limitación?

En qué se diferencia del rebote

Ahora, hablemos de aceleración. Si antirrebote está esperando responder hasta que la charla se calme, acelerar es como un policía de tránsito que solo deja pasar un automóvil cada pocos segundos, sin importar cuántos automóviles estén esperando. Garantiza que se llame a una función como máximo una vez cada período establecido, incluso si el evento se activa repetidamente.

Cuándo utilizar la limitación

Querrás utilizar la limitación cuando necesites garantizar una ejecución consistente a lo largo del tiempo. Por ejemplo, cuando un usuario se desplaza hacia abajo en una página, el evento de desplazamiento puede activarse docenas de veces por segundo. Sin limitación, su aplicación podría ralentizarse mientras intenta manejar todos esos eventos. La limitación limita la frecuencia con la que se puede ejecutar el controlador de eventos de desplazamiento, lo que mejora el rendimiento.

Limitación en código

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

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

Aquí, la función de aceleración garantiza que el controlador de eventos de desplazamiento solo se ejecute una vez cada 1000 milisegundos, asegurándose de que su aplicación no se abrume.

Ejemplos del mundo real

Pongamos estas técnicas en un contexto más práctico. Digamos que estás creando una aplicación React donde los usuarios escriben en un cuadro de búsqueda. Puede rechazar los eventos de entrada para evitar inundar su servidor con llamadas API. Alternativamente, si estás realizando un seguimiento de hasta dónde se ha desplazado el usuario en la página, puedes utilizar la limitación para optimizar tu rendimiento.

Antirrebote en React

import { useState } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');

    const handleSearch = debounce((value) => {
        // API call with the value
        console.log('Searching for:', value);
    }, 300);

    return (
         {
                setQuery(e.target.value);
                handleSearch(e.target.value);
            }}
        />
    );
}

Limitación de eventos de desplazamiento

import { useEffect } from 'react';

function ScrollTracker() {
    useEffect(() => {
        const handleScroll = throttle(() => {
            console.log('Scrolling...');
        }, 1000);

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return 
Scroll to see throttling in action!
;
}

Mejores prácticas para la optimización del rendimiento

Antirrebote versus limitación: cuándo elegir

Esta es una regla general rápida:

• La eliminación de rebotes es perfecta cuando quieres esperar hasta que el usuario deje de hacer algo. Por ejemplo, al escribir en una barra de búsqueda.
• La limitación funciona mejor cuando se desea garantizar una ejecución periódica y constante a lo largo del tiempo. Es ideal para desplazarse o cambiar el tamaño de las ventanas.

Cuando sepas con qué tipo de evento estás lidiando y con qué frecuencia se desencadena, podrás elegir la técnica adecuada para el trabajo.

Conclusión

Controlar eventos frecuentes en JavaScript es esencial para optimizar el rendimiento, y tanto antirrebote como aceleración ofrecen soluciones potentes. Al comprender cuándo usar cada uno, puede hacer que sus aplicaciones web sean más fluidas y con mayor capacidad de respuesta, ya sea para manejar entradas de búsqueda, cambiar el tamaño de ventanas o administrar eventos de desplazamiento.

La próxima vez que descubras que tu aplicación se atasca debido a demasiados eventos, pregúntate: ¿Debería frenar o acelerar? ¡Te alegrarás de haberlo hecho!

¿Listo para probarlo? La próxima vez que trabajes en un proyecto, prueba estas técnicas. ¡Te sorprenderá saber cuánto más suave se siente todo!