Como Debouncing e Throttling podem ajudar a evitar sobrecargas

Quando estamos desenvolvendo aplicações web, é comum lidarmos com ações do usuário que podem gerar muitos eventos em um curto período de tempo. Por exemplo, o usuário pode clicar repetidamente em um botão ou rolar rapidamente a página. Esses eventos podem levar a uma sobrecarga do sistema, pois cada evento pode desencadear um processamento complexo. É aqui que entram as técnicas de Debouncing e Throttling no JavaScript para melhorar a performance e evitar que o sistema seja sobrecarregado.

Debouncing:

Debouncing é uma técnica utilizada para garantir que um evento só seja acionado após um determinado tempo de inatividade do usuário. Isso é útil quando o evento é acionado várias vezes em rápida sucessão, como ao digitar no campo de busca. A técnica de debouncing funciona configurando um temporizador para aguardar um período específico antes de executar a ação. Se um novo evento for acionado durante esse tempo, o temporizador será reiniciado e o período de espera começará novamente.

function debounce(func, delay) {
  let timer;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    timer = setTimeout(() => func.apply(context, args), delay);
  }
}

function search() {
  // Código para realizar a busca
}

const searchDebounced = debounce(search, 500);
document.querySelector('#searchInput').addEventListener('keyup', searchDebounced);

No exemplo acima, a função debounce recebe duas variáveis, uma função e um número representando o período de espera em milissegundos. Ela retorna uma nova função que usará o temporizador para esperar o período de tempo especificado antes de executar a função de busca. Quando o usuário digita algo no campo de busca, a função debounce é chamada e configura um temporizador. Se o usuário digitar mais coisas antes que o temporizador expire, ele é reiniciado. Quando o temporizador finalmente expirar, a função de busca é executada.

Throttling:

Throttling é uma técnica semelhante ao debouncing, mas em vez de aguardar um período de inatividade do usuário, ela executa o evento a cada período de tempo definido. Isso é útil quando o evento precisa ser acionado com frequência, mas não em excesso, como ao rolar a página.

function throttle(func, delay) {
  let lastCall = 0;

  return function() {
    const now = new Date().getTime();

    if (now - lastCall < delay) {
      return;
    }

    lastCall = now;
    func.apply(this, arguments);
  }
}

function logScrollPosition() {
  console.log(window.scrollY);
}

const throttledLog = throttle(logScrollPosition, 500);
window.addEventListener('scroll', throttledLog);

No exemplo acima, a função throttle também recebe duas variáveis, uma função e um número representando o período de tempo em milissegundos. Ela retorna uma nova função que verifica a hora da última chamada à função. Se o tempo decorrido desde a última chamada for menor do que o período de tempo especificado, a função de rolagem é ignorada. Se for maior, a função de rolagem é executada e o tempo da última chamada é atualizado.

Comparação entre Debouncing e Throttling:

Tanto o debouncing quanto o throttling são técnicas que ajudam a melhorar a performance do sistema, evitando sobrecargas desnecessárias. No entanto, cada uma é adequada para um tipo diferente de evento.

O debouncing é mais útil para eventos que podem ser acionados várias vezes em rápida sucessão, como digitar em um campo de busca. Ele aguarda um período de inatividade do usuário antes de executar a ação, evitando que a ação seja executada várias vezes em sequência. Isso ajuda a reduzir a sobrecarga do sistema, já que a ação só será executada uma vez, após um período de espera.

Por outro lado, o throttling é mais adequado para eventos que precisam ser acionados com frequência, mas não em excesso. Por exemplo, ao rolar uma página, o evento de rolagem é acionado várias vezes em rápida sucessão. Com o throttling, o evento é executado a cada período de tempo definido, evitando que a ação seja executada em excesso e reduzindo a sobrecarga do sistema.

Ao usar essas técnicas em seu código JavaScript, você pode garantir que seu aplicativo seja mais responsivo e eficiente, proporcionando uma melhor experiência do usuário.