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:
scrollresizemousemoveinput
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.
Resumo da aula para nunca mais esquecer
- Eventos podem disparar muitas vezes
- Debounce espera o evento parar
- Throttle limita a frequência
- Ambos melhoram performance
- Escolha a técnica correta para cada caso
Na próxima aula, vamos falar de um problema silencioso e perigoso: Memory Leaks.
HARDWARE
Entendendo o seu computador
O que há dentro do meu computador?
Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.
Você Sabia?
Senhas
Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.
Mouse
O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.
Recorde de patentes
A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.
PDP-1
O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.
Música tema do Blanka
Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.










