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?

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

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.

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.

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.

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.