JavaScript javascript

Debounce para campos de busca

Evita executar uma busca pesada a cada tecla e dispara a ação somente depois de uma pequena pausa.

Código
function debounce(funcao, espera = 300) {
  let temporizador;

  return (...argumentos) => {
    window.clearTimeout(temporizador);
    temporizador = window.setTimeout(
      () => funcao(...argumentos),
      espera
    );
  };
}

const campoBusca = document.querySelector('#busca');
const buscar = debounce((termo) => {
  console.log('Buscar por:', termo);
}, 300);

campoBusca.addEventListener('input', (evento) => {
  buscar(evento.target.value.trim());
});

Quando usar

Use em autocompletes, filtros e pesquisas que consultam uma API ou processam listas grandes.

Como adaptar ao seu projeto

O segundo argumento é o tempo de espera em milissegundos. Entre 250 e 400 ms costuma ser confortável para digitação.

Antes de publicar

Não use atrasos longos em filtros locais simples. Para acessibilidade, informe quando os resultados forem atualizados.

Códigos relacionados