This content originally appeared on DEV Community and was authored by Joel Oliveira
O que é Debouncing?
Debouncing é uma técnica usada para limitar a frequência que uma função é executada. Então, não importa quantas vezes o usuário dispara o evento, a chamada só será feita após um período específico de tempo, reduzindo assim a sobrecarga no sistema e melhorando a performance do aplicativo.
Por exemplo, se o usuário estiver digitando em um campo de pesquisa, o debouncing garante que a função de pesquisa seja executada apenas depois que o usuário parar de digitar por um curto período de tempo, em vez de ser executada a cada caractere digitado.
function handleScroll() {
console.log('scroll');
}
// período de tempo em milissegundos que a função deve esperar antes de ser executada novamente
const debounceTime = 500;
// função debounced usando a técnica de debouncing
function debounce (func, delay) {
let timeoutId;
return function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, arguments), delay
});
};
}
// aciona o evento de rolagem da página usando a função debounced
window.addEventListener('scroll', debounce(handleScroll, debounceTime));
O que é Throttling?
Throttling é uma técnica usada para limitar a taxa de execução de uma função. Isso é importante para evitar que a função seja executada várias vezes em um curto período de tempo, o que pode levar a problemas de performance e comportamentos indesejados na aplicação.
A técnica garante que a função seja executada somente em intervalos regulares de tempo, independentemente da frequência com que é acionada. Suponhamos que você tenhamos uma função que deve ser executada quando o usuário redimensiona a janela do navegador. Sem o throttling, a função pode ser acionada várias vezes por segundo, o que pode causar um impacto negativo na performance da aplicação. Com o throttling, a função é executada em intervalos regulares, independentemente da frequência com que é acionada.
function handleResize() {
console.log('resize');
}
// período de tempo em milissegundos que a função deve esperar antes de ser executada novamente
const throttleTime = 500;
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
// aciona o evento de redimensionamento da janela e usa a função throttled
window.addEventListener('resize', throttle(handleResize, throttleTime));
Throttling vs Debouncing
A diferença entre as duas técnicas pode ser compreendida através de um simples botão.
Suponha que voçê tenha um daqueles brinquedos que dispara uma bola a cada vez que você pressiona um botão. Mas você está pressionando o botão com muita frequência, o que acaba emperrando a bola dentro do brinquedo. Para resolver isso, você pode usar duas estratégias diferentes: Throttling e Debouncing.
- Throttling
Throttling significa que, você pode apertar o botão somente após um determinado intervalo de tempo. Isso significa que, ao pressiona o botão a bola é disparada e a função do botão é desativada, mesmo que você aperte o botão várias vezes, ele só vai voltar a funcionar após um determinado intervalo de tempo.
- Debouncing
Já o Debouncing significa que, se você apertar o botão várias vezes, o brinquedo vai disparar a bola na primeira vez que você pressionar o botão, não vai desativar a função do botão e passará a ignorar todos os cliques dentro de um determinado intervalo de tempo.
This content originally appeared on DEV Community and was authored by Joel Oliveira
Joel Oliveira | Sciencx (2023-03-15T00:48:00+00:00) Entendendo as diferenças entre Throttling e Debouncing no JavaScript. Retrieved from https://www.scien.cx/2023/03/15/entendendo-as-diferencas-entre-throttling-e-debouncing-no-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.