debounce

Onde usar

Usado em campos de busca e no redimensionamento de janela, para não disparar uma requisição a cada tecla. Em code review, costuma-se compará-lo com o throttle.

Em código

function debounce(fn, ms) {
  let id;
  return (...args) => {
    clearTimeout(id);
    id = setTimeout(() => fn(...args), ms);
  };
}
const buscar = debounce(console.log, 300);

Exemplos

I added a debounce of 300 ms to the search field.

Coloquei um debounce de 300 ms no campo de busca.

Debounce waits for a pause; throttle limits how often the call happens.

O debounce espera uma pausa; o throttle limita a frequência da chamada.

Cuidado

Confundir com throttle: debounce espera a pausa, e throttle deixa passar no máximo uma chamada por intervalo.

Antônimos

throttle

Origem

Do inglês debounce, termo da eletrônica para filtrar o ruído de um contato de botão.