Debounce versus throttle — implementados manualmente
Crie pequenos utilitários de debounce e throttle. Pratique as variantes com execução no início e no fim e saiba quando escolher cada uma
Debounce versus throttle — implementados manualmente é uma aula grátis de JavaScript 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.
Visão geral
Objetivo: Controlar eventos ruidosos.
- Adiamento: aguardar o silêncio e executar uma vez
- Limitação: executar no máximo uma vez por intervalo
- Chamadas iniciais e posteriores
- Auxiliares pequenos e legíveis
Adiamento (posterior)
O adiamento posterior reinicia um temporizador a cada evento e executa uma vez quando tudo se acalma.
// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
let t = null;
return function (...args) {
clearTimeout(t);
t = setTimeout(function () {
fn.apply(null, args);
}, wait);
};
}
// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
console.log("debounced:", msg);
}, 10);
for (let i = 0; i < 5; i++) {
setTimeout(function () {
debouncedLog("final after bursts");
}, i * 3);
}
Adiamento (inicial)
O adiamento inicial é disparado imediatamente e depois bloqueia repetições até o fim do período de silêncio.
// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
let t = null;
return function (...args) {
if (t === null) {
fn.apply(null, args);
}
clearTimeout(t);
t = setTimeout(function () {
t = null;
}, wait);
};
}
// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
console.log("leading:", x);
}, 12);
for (let i = 0; i < 4; i++) {
setTimeout(function () {
firstTap("first-then-wait");
}, i * 3);
}
Limitação (inicial)
A limitação restringe as chamadas a uma por janela de tempo, descartando as excedentes.
// Throttle (leading): at most once per interval
function throttle(fn, wait) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last >= wait) {
last = now;
fn.apply(null, args);
}
};
}
// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
console.log("throttled:", n);
}, 10);
for (let i = 0; i < 10; i++) {
setTimeout(function () {
throttled(i);
}, i * 2);
}
Limitação (posterior)
A limitação posterior garante que você ainda receba o valor mais recente ao fim da janela.
// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
let last = 0;
let timer = null;
let queuedArgs = null;
function invoke(args) {
last = Date.now();
fn.apply(null, args);
}
return function (...args) {
const now = Date.now();
const remaining = wait - (now - last);
if (remaining <= 0) {
// Window passed: run now
clearTimeout(timer);
timer = null;
queuedArgs = null;
invoke(args);
} else {
// Queue the latest args to run at the end of the window
queuedArgs = args;
clearTimeout(timer);
timer = setTimeout(function () {
timer = null;
if (queuedArgs) {
invoke(queuedArgs);
queuedArgs = null;
}
}, remaining);
}
};
}
// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
console.log("trail:", x);
}, 10);
for (let i = 0; i < 6; i++) {
setTimeout(function () {
trail("v" + i);
}, i * 3);
}
Quando usar cada uma?
Escolha:
- Adiamento: pesquisa conforme você digita, redimensionamento — execute depois que o usuário parar.
- Limitação: rolagem/arraste — limite as chamadas a um ritmo constante.
- Inicial para resposta imediata; posterior para capturar o valor final.
Questionário sobre adiamento e limitação
Verificação rápida: Limitar chamadas por janela.
Recapitulação
Recapitulação: Você escreveu adiamentos posteriores e iniciais, uma limitação inicial simples e uma limitação posterior leve. Escolha o adiamento para “depois que o usuário parar” e a limitação para “ritmo constante”.
Perguntas Frequentes
A aula “Debounce versus throttle — implementados manualmente” é grátis?
Sim — o texto completo de “Debounce versus throttle — implementados manualmente” é 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 JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.
O que vou aprender em “Debounce versus throttle — implementados manualmente”?
Crie pequenos utilitários de debounce e throttle. Pratique as variantes com execução no início e no fim e saiba quando escolher cada uma Você pratica JavaScript 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 JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript 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 “Debounce versus throttle — implementados manualmente”?
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 JavaScript Academy?
Sim. Cada aula de JavaScript 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
- setTimeout, setInterval e desvio dos temporizadores
- Debounce versus throttle — implementados manualmente
- Temporização de animações — introdução a loops baseados em tempo