Debounce JavaScript – Como fazer seu JS esperar

E aqui está o código fonte do vídeo tutorial:

Vamos ver o código com mais detalhes agora.

Suponha que você tenha um botão chamado assim:

<button id="myBtn">Click me</button>

E no seu arquivo JS você tem algo parecido com isto:

document.getElementById('myBtn').addEventListener('click', () => {
  console.log('clicked');
})

Toda vez que você clica no botão, você vê uma mensagem no console dizendo: clicked.

Vamos adicionar um método de debounce ao nosso click ouvinte de evento aqui:

document.getElementById('myBtn').addEventListener('click', debouce(() => {
  console.log('click');
}, 2000))

O método debounce aqui recebe dois argumentos, callback & wait. callback é a função que você deseja executar, enquanto wait é o atraso configurável do período após o qual você deseja callback para ser executado.

Aqui nossa callback método é simplesmente console.log('click'); e a wait é 2000 milliseconds.

Portanto, dado esse método de rejeição, que utiliza dois parâmetros callback & wait, vamos definir debounce:

function debounce(callback, wait) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback(...args);
    }, wait);
  };
}

Função debounce recebe dois parâmetros: o retorno de chamada (que é a função que queremos executar) e o wait período (após quanto atraso queremos executar nosso retorno de chamada).

Dentro da função, simplesmente retornamos uma função, que é a seguinte:

let timerId;
return (...args) => {
  clearTimeout(timerId);
  timerId = setTimeout(() => {
    callback(...args);
  }, wait);
};

O que essa função faz é invocar nossa callback método após um certo período de tempo. E se durante esse período o mesmo método for invocado novamente, a função anterior será cancelada e o temporizador será redefinido e reiniciado.

E é isso aí! Tudo o que você precisa saber sobre o que é debounce.

Aqui está outro vídeo bônus sobre fechamentos, porque eu usei um closure dentro do meu debounce função.

Deixe-me saber sobre Twitter se você conseguiu encontrar o uso do fechamento dentro do método de debounce.

Feliz codificação, pessoal.