Tratamento Eficiente de Eventos e Limitação de Frequência
Implemente limitação de frequência e debouncing para eventos acionados com frequência, como redimensionamento ou rolagem, evitando chamadas excessivas de funções e melhorando a responsividade.
Tratamento Eficiente de Eventos e Limitação de Frequência é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.
Sobrecarga de eventos: um problema de desempenho
Ao criar aplicações Web interativas, geralmente dependemos de eventos como rolagem, redimensionamento ou digitação. Esses eventos acionam funções que atualizam a interface do usuário ou realizam cálculos.
No entanto, se esses eventos forem disparados com frequência excessiva, poderão causar gargalos de desempenho, uma experiência de uso lenta e até travamentos do navegador. É nesse ponto que as técnicas de otimização se tornam essenciais.
O problema: disparos rápidos de eventos
Veja com que frequência um evento típico, como scroll, pode ser disparado sem qualquer otimização. Abra o console ou observe o contador enquanto rola a página.
Observe como a contagem aumenta rapidamente, indicando muitas chamadas de função em um curto período. Isso pode ser muito ineficiente.
<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Scroll Count: 0</div>
<p>Scroll down to see the event fire rapidly.</p>
<script>
$(document).ready(function() {
let count = 0;
$(window).on('scroll', function() {
count++;
$('#status').text('Scroll Count: ' + count);
});
});
</script>
</body>
</html>Introdução à limitação de frequência
A limitação de frequência é uma técnica que limita a frequência com que uma função pode ser chamada ao longo de um período. Ela garante que uma função seja executada no máximo uma vez em um determinado intervalo de tempo.
Pense nisso como um portão que só abre a cada 200 milissegundos. Não importa quantas vezes você tente passar: só será possível atravessá-lo quando estiver aberto.
Limitação de frequência em ação
Aqui está um utilitário simples de limitação de frequência. Ele garante que nosso manipulador de rolagem seja executado no máximo uma vez a cada 200 milissegundos. Isso reduz significativamente o número de chamadas durante uma rolagem contínua.
Compare este exemplo com o anterior. A contagem é atualizada de forma suave, porém com menos frequência, economizando recursos.
<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Throttled Scroll Count: 0</div>
<p>Scroll down. The count updates less frequently.</p>
<script>
// A simple throttling utility function
function throttle(func, delay) {
let canRun = true;
return function(...args) {
if (canRun) {
func.apply(this, args);
canRun = false;
setTimeout(() => canRun = true, delay);
}
};
}
$(document).ready(function() {
let count = 0;
const throttledScroll = throttle(function() {
count++;
$('#status').text('Throttled Scroll Count: ' + count);
}, 200); // Update at most every 200ms
$(window).on('scroll', throttledScroll);
});
</script>
</body>
</html>Introdução ao debounce
Debounce é outra técnica que atrasa a execução de uma função até que tenha passado determinado período desde a última vez que o evento foi disparado.
Imagine uma luz que só se apaga depois que você para de se mover por 1 segundo. Se continuar se movendo, o temporizador será reiniciado. A função só será executada quando o usuário interromper a ação pelo atraso especificado.
Debounce em ação
Aqui, aplicamos debounce ao evento keyup de um campo de texto. O status só é atualizado depois que você para de digitar por 500 milissegundos.
Isso é perfeito para caixas de pesquisa, nas quais você só quer realizar uma consulta depois que o usuário terminar de digitar o termo.
<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { font-family: sans-serif; margin: 0; padding: 20px; }
input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
#status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<p>Type into the box. The status updates only after you pause.</p>
<input type="text" id="myInput" placeholder="Start typing...">
<div id="status">Last typed: (none)</div>
<script>
// A simple debouncing utility function
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
$(document).ready(function() {
const debouncedLog = debounce(function(event) {
$('#status').text('Last typed: ' + $(event.target).val());
}, 500); // Wait 500ms after typing stops
$('#myInput').on('keyup', debouncedLog);
});
</script>
</body>
</html>Limitação de frequência vs. debounce: principais diferenças
Embora ambos otimizem o tratamento de eventos, eles têm finalidades diferentes:
- Limitação de frequência: garante a execução regular de uma função ao longo do tempo, mesmo que o evento seja disparado rapidamente. O objetivo é controlar a taxa.
- Debounce: garante que uma função só seja executada após um período de inatividade. O objetivo é esperar o usuário terminar uma ação.
A escolha da técnica adequada depende do seu caso de uso específico.
Casos de uso práticos
Veja alguns cenários comuns para cada técnica:
- Limitação de frequência:
- Redimensionamento da janela
- Rolagem da página
- Movimentos de arrastar e soltar
- Atualizações de jogos (por exemplo, disparar uma arma) - Debounce:
- Entrada na barra de pesquisa (preenchimento automático)
- Validação de formulário após a entrada do usuário
- Salvamento de conteúdo em um editor de texto
- Disparo de uma chamada à API depois que o usuário para de digitar
Integração com eventos do jQuery
Você pode integrar facilmente essas funções utilitárias aos métodos de eventos do jQuery, como .on() ou .bind(). Basta passar sua função com limitação de frequência ou debounce como manipulador do evento.
$(window).on('resize', throttle(myResizeHandler, 250));
$('#search-input').on('keyup', debounce(searchFunction, 300));Assim, seus ouvintes de eventos permanecem eficientes e sua aplicação continua responsiva.
Benefícios para o desempenho
Ao implementar limitação de frequência e debounce, você obtém vários benefícios de desempenho:
- Menor uso da CPU: menos chamadas de função significam menos trabalho para o navegador.
- Interface mais suave: evita animações instáveis ou interfaces que não respondem.
- Melhor experiência do usuário: os usuários percebem a aplicação como mais rápida e fluida.
- Chamadas à API otimizadas: evita sobrecarregar seu sistema de retaguarda com solicitações desnecessárias.
Verificação rápida sobre otimização de eventos
Qual dos cenários a seguir seria mais bem tratado com debounce?
Recapitulação e próximos passos
Ótimo trabalho! Você aprendeu sobre duas técnicas poderosas para otimizar o tratamento de eventos:
- Limitação de frequência: limita a taxa com que uma função pode ser chamada.
- Debounce: atrasa a execução da função até que ocorra um período de inatividade.
Dominar essas técnicas melhorará significativamente o desempenho e a capacidade de resposta das suas aplicações jQuery. Experimente diferentes atrasos para encontrar o ponto ideal para as suas necessidades específicas!
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 22
- Aulas
- 48
Perguntas Frequentes
A aula “Tratamento Eficiente de Eventos e Limitação de Frequência” é grátis?
Sim — o texto completo de “Tratamento Eficiente de Eventos e Limitação de Frequência” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.
O que vou aprender em “Tratamento Eficiente de Eventos e Limitação de Frequência”?
Implemente limitação de frequência e debouncing para eventos acionados com frequência, como redimensionamento ou rolagem, evitando chamadas excessivas de funções e melhorando a responsividade. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.
Quanto tempo leva a aula “Tratamento Eficiente de Eventos e Limitação de Frequência”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Otimização de Operações de Manipulação do DOM
- Tratamento Eficiente de Eventos e Limitação de Frequência
- Uso de Cache e Objetos Adiados