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)
Executar lógica pesada aqui é pedir problemas.

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
Debounce é ótimo para intenção do usuário. Throttle é ideal para eventos contínuos.

Erro comum

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

Escolher errado pode causar atraso perceptível ou execuções demais.

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.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

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.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.