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
JavaScript
Botão para copiar texto com Clipboard API
Função de cópia com retorno visual e alternativa para navegadores sem acesso à API moderna.
JavaScriptLer e atualizar parâmetros da URL com JavaScript
Manipule filtros compartilháveis como ?categoria=css&ordem=recentes sem concatenar strings manualmente.
Git.gitignore para um projeto web
Base conservadora que evita versionar dependências, segredos locais, logs e arquivos gerados.