JavaScript é fantástico para tornar seus aplicativos da web dinâmicos e interativos, mas há uma coisa que ele não consegue lidar bem sozinho: eventos frequentes. Pense em coisas como redimensionamento de janelas, rolagem e digitação em caixas de pesquisa. Se não forem gerenciados adequadamente, eles podem inundar seu aplicativo com gatilhos de eventos, tornando as coisas mais lentas e criando uma experiência de usuário lenta. É aí que entram o debouncing e o throttling. Essas técnicas ajudam você a controlar a frequência com que determinadas funções são executadas, mantendo seu aplicativo rápido e responsivo.

Neste artigo, detalharemos debouncing e throttling, mostraremos quando usá-los e forneceremos exemplos do mundo real para vê-los em ação. Vamos mergulhar nessas técnicas essenciais de otimização de desempenho de JavaScript!

O que é Debouncing?

Como funciona

Pense em debouncing como esperar que alguém termine de falar antes de você responder. Se você já esteve em uma conversa em que alguém fica interrompendo você, você entendeu! O conceito principal do debouncing é que ele atrasa a execução de uma função até que um tempo especificado tenha passado desde a última vez que o evento foi acionado.

Em termos simples, se um evento (como uma digitação do usuário) continuar acontecendo rapidamente, o debouncing garante que a função associada (como uma consulta de pesquisa) só seja executada depois que o usuário parar por um determinado período.

Quando usar o Debouncing

Você deve usar o debouncing quando quiser limitar chamadas de função excessivas causadas por entradas frequentes do usuário. Um exemplo clássico é quando você tem uma caixa de pesquisa e deseja fazer uma chamada de API toda vez que o usuário digita. Sem debouncing, a API poderia ser chamada a cada pressionamento de tecla, criando carga desnecessária em seu servidor. Com o debouncing, a API só é chamada quando o usuário para de digitar.

Debouncing no 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

Neste exemplo, a função debounce garante que a chamada da API aconteça apenas 300 milissegundos após o usuário parar de digitar.

O que é estrangulamento?

Como isso difere do Debouncing

Agora, vamos falar sobre estrangulamento. Se debouncing está esperando para responder até que a conversa acabe, throttling é como um guarda de trânsito que deixa apenas um carro passar a cada poucos segundos, não importa quantos carros estejam esperando. Ele garante que uma função seja chamada no máximo uma vez a cada período definido, mesmo que o evento seja acionado repetidamente.

Quando usar a limitação

Você desejará usar a limitação quando precisar garantir uma execução consistente ao longo do tempo. Por exemplo, quando um usuário rola uma página para baixo, o evento de rolagem pode ser acionado dezenas de vezes por segundo. Sem limitação, seu aplicativo poderá ficar lento ao tentar lidar com todos esses eventos. A limitação limita a frequência com que o manipulador de eventos de rolagem pode ser executado, melhorando o desempenho.

Limitação no 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

Aqui, a função de aceleração garante que o manipulador de eventos de rolagem seja executado apenas uma vez a cada 1000 milissegundos, garantindo que seu aplicativo não fique sobrecarregado.

Exemplos do mundo real

Vamos colocar essas técnicas em um contexto mais prático. Digamos que você esteja criando um aplicativo React onde os usuários digitam em uma caixa de pesquisa. Você pode cancelar os eventos de entrada para evitar inundar seu servidor com chamadas de API. Alternativamente, se você estiver monitorando até que ponto o usuário rolou na página, você pode usar a limitação para otimizar seu desempenho.

Debouncing em 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);
            }}
        />
    );
}

Limitando eventos de rolagem

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!
;
}

Melhores práticas para otimização de desempenho

Debouncing vs. Throttling: quando escolher

Aqui está uma regra prática rápida:

• Debouncing é perfeito quando você deseja esperar até que o usuário pare de fazer algo. Por exemplo, ao digitar em uma barra de pesquisa.
• A limitação funciona melhor quando você deseja garantir uma execução consistente e periódica ao longo do tempo. É ideal para rolar ou redimensionar janelas.

Quando você sabe com que tipo de evento está lidando e com que frequência ele é acionado, você pode escolher a técnica certa para o trabalho.

Conclusão

Controlar eventos frequentes em JavaScript é essencial para otimizar o desempenho, e tanto debouncing quanto throttling oferecem soluções poderosas. Ao entender quando usar cada um, você pode tornar seus aplicativos web mais suaves e responsivos, seja para lidar com entradas de pesquisa, redimensionar janelas ou gerenciar eventos de rolagem.

Da próxima vez que você descobrir que seu aplicativo está atolado em muitos eventos, pergunte-se: Devo debounce ou acelerador? Você ficará feliz por ter feito isso!

Pronto para experimentar? Da próxima vez que você estiver trabalhando em um projeto, experimente essas técnicas. Você ficará surpreso com o quanto tudo parece mais suave!