Entendendo as diferenças entre Throttling e Debouncing no JavaScript

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.