Debounce e throttle: parecidos, e não são a mesma coisa

14/04/2026

Duas técnicas para o mesmo problema — um evento que dispara vezes de mais — e que resolvem casos diferentes. Trocá-las dá sempre uma sensação estranha na interface.

Debounce: espera que pare. Só executa quando as coisas acalmam.
Throttle: executa durante, mas no máximo uma vez a cada X.

1. Debounce: para o que só interessa no fim

function debounce(funcao, espera = 300) {
  let temporizador;
  return (...args) => {
    clearTimeout(temporizador);
    temporizador = setTimeout(() => funcao(...args), espera);
  };
}

// Procurar enquanto se escreve: só quando a pessoa parar de escrever
campo.addEventListener('input', debounce((evento) => {
  procurar(evento.target.value);
}, 300));

Escrever "javascript" são dez teclas. Sem debounce, dez pedidos ao servidor — e o resultado de "javascr" pode chegar depois do de "javascript" e escrever por cima dele.

2. Throttle: para o que tem de acompanhar

function throttle(funcao, intervalo = 200) {
  let ultima = 0;
  return (...args) => {
    const agora = Date.now();
    if (agora - ultima < intervalo) return;
    ultima = agora;
    funcao(...args);
  };
}

// Barra de progresso do scroll: tem de mexer enquanto se desliza
window.addEventListener('scroll', throttle(() => {
  actualizarBarraDeProgresso();
}, 100));

Com debounce, a barra só mexia quando a pessoa parasse — inútil.

3. Como escolher, numa pergunta

Interessa-me o resultado enquanto a coisa acontece, ou só no fim?

Guardar um rascunho enquanto se escreve → debounce.
Validar um campo depois de escrever → debounce.
Mostrar a posição do rato → throttle.
Recalcular um layout ao redimensionar → throttle.

4. Antes de escrever isto à mão

Para saber se algo está visível, o IntersectionObserver é melhor do que qualquer throttle no scroll. Para reagir a mudanças de tamanho, existe o ResizeObserver. E para animações ligadas ao scroll, o requestAnimationFrame sincroniza com o desenho do browser em vez de adivinhar um intervalo.

O debounce e o throttle continuam a ser as ferramentas certas para o resto — a começar pela caixa de pesquisa.

Debounce e throttle: parecidos, e não são a mesma coisa

Comentários