Técnica debounce com JavaScript

122d atrás

Você já se deparou com alguma chamada do seu código que é feita de maneira frequente e que pode representar um desperdício de recursos? Talvez a técnica debounce possa ser a solução.

Debounce é a técnica de atrasar a execução de uma função, por certa quantidade de tempo e cancelar solicitações antigas se há uma nova. Utilizar essa estratégia pode ser extremamente importante para a performance do seu código, como em eventos chamados com frequência, a exemplo de input ou scroll do usuário.

Exemplo

Para exemplo, vamos utilizar o debounce em um input, para isso adicione o seguinte HTML:

<input>

Agora adicione a função que cria o efeito debounce no seu #JavaScript:

function debounce(callback, ms) {
    let timeout;

    return function(...args) {
        const c = () => {
            clearTimeout(timeout);
            callback(...args);
        }

        clearTimeout(timeout);
        timeout = setTimeout(c, ms);
    }
}

Basicamente, essa função retorna outra função de callback que só é executada depois de um período de tempo determinado e cancela outras solicitações antigas.

E agora vamos cadastrar a função que será executada com debounce:

const debounceFunc = debounce((e) => console.log(e.target.value), 1000);

Nesse caso, será executado um console.log depois de 1000ms de certo evento.

E agora vamos adicionar ao listener de input:

document.querySelector('input').addEventListener('input', debounceFunc);

sem a debounceFunc o console.log seria chamado depois de qualquer entrada do usuário, com o debounce ela só será executada depois de 1000ms da última solicitação, nesse caso.

Com isso, você pode economizar em chamadas HTTP, cálculos complexos, ou qualquer outra atividade que é requisitada intensamente.

Exemplo

Comentários (0)