Aula 99 - Debounce e Throttle

Eventos no JavaScript podem disparar **muitas vezes em poucos milissegundos**.

Se não controlarmos isso, o resultado é:

• quedas de performance
• interfaces travando
• execuções desnecessárias

É aqui que entram debounce e throttle.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender a diferença entre debounce e throttle
• Escolher a técnica correta para cada evento
• Implementar debounce e throttle do zero
• Melhorar performance em cenários reais

O problema: eventos em excesso

Alguns eventos disparam dezenas (ou centenas) de vezes:

• scroll
• resize
• mousemove
• input

 window.addEventListener("resize", () => { console.log("Redimensionando..."); }); 

 // Saída será: // "Redimensionando..." (disparado muitas vezes) 

O que é Debounce?

Debounce atrasa a execução até que:

• o evento pare de acontecer
• um tempo definido seja alcançado

Em outras palavras:

“só execute quando o usuário parar.”

Exemplo clássico de debounce

Campo de busca:

 function debounce(fn, delay) { let timer;

return function (...args) {
clearTimeout(timer);

timer = setTimeout(() => {
  fn.apply(this, args);
}, delay);


};
}

Usando o debounce:

 function buscar(termo) { console.log("Buscando:", termo); }

const buscarDebounce = debounce(buscar, 500);

buscarDebounce("j");
buscarDebounce("ja");
buscarDebounce("jav");
buscarDebounce("java");

 // Saída será (após 500ms): // Buscando: java 

Quando usar Debounce?

• campos de busca
• autocomplete
• validações de formulário

O que é Throttle?

Throttle limita a execução:

• a uma vez a cada intervalo
• independente de quantas vezes o evento dispare

Ou seja:

“execute no máximo uma vez por período.”

Exemplo de throttle

 function throttle(fn, limit) { let emExecucao = false;

return function (...args) {
if (!emExecucao) {
fn.apply(this, args);
emExecucao = true;

  setTimeout(() => {
    emExecucao = false;
  }, limit);
}


};
}

Usando o throttle:

 function logScroll() { console.log("Scroll detectado"); }

const logThrottle = throttle(logScroll, 1000);

window.addEventListener("scroll", logThrottle);

 // Saída será: // "Scroll detectado" no máximo uma vez por segundo 

Quando usar Throttle?

• scroll
• resize
• eventos contínuos

Debounce vs Throttle

• Debounce → espera parar
• Throttle → limita a frequência

Erro comum

Usar debounce onde deveria ser throttle (ou vice-versa).

Integração com performance no DOM

• menos repaints
• menos reflows
• interface mais fluida

Debounce e throttle são ferramentas essenciais para interfaces modernas.

Na próxima aula, vamos falar de um problema silencioso e perigoso: Memory Leaks.