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?

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

Pac Man

Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.