Entenda o que são debounce e throttle e como aplicá-los para melhorar a performance

O que é debounce e throttle e como aplicá-los?

No desenvolvimento de aplicações interativas, frequentemente precisamos otimizar eventos que são disparados várias vezes em um curto intervalo de tempo. Esses eventos podem causar sobrecarga no processamento e afetar a performance da aplicação. Debounce e throttle são duas técnicas utilizadas para controlar a frequência com que eventos são acionados.

Ambas as técnicas são úteis quando lidamos com eventos como scroll, resize e keypress, que podem ser disparados inúmeras vezes durante a interação do usuário. Vamos entender como cada uma dessas técnicas funciona e como utilizá-las em JavaScript.

O que é Debounce?

O debounce é uma técnica que garante que uma função seja executada apenas após um certo tempo de inatividade, ou seja, ela adia a execução da função até que o usuário tenha terminado de interagir com o elemento.

Essa técnica é especialmente útil quando lidamos com eventos como a digitação de texto em um campo de pesquisa. Em vez de disparar a função toda vez que uma tecla é pressionada, você pode usar debounce para aguardar até que o usuário tenha terminado de digitar antes de executar a ação.

Exemplo de debounce:

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

const pesquisa = document.getElementById('campoPesquisa');
pesquisa.addEventListener('input', debounce(function() {
  console.log('Pesquisando...', this.value);
}, 500));

O que o código está fazendo: O código acima define uma função debounce, que aguarda 500 milissegundos após a última interação para executar a função pesquisa. Se o usuário continuar digitando durante esse período, o temporizador será reiniciado, e a função será chamada apenas quando o usuário parar de digitar por 500ms.

O que é Throttle?

Ao contrário do debounce, o throttle garante que uma função seja executada no máximo uma vez a cada intervalo de tempo definido. Isso é útil quando você precisa executar uma função regularmente, mas não quer que ela seja executada com uma frequência muito alta, como em eventos de rolagem ou redimensionamento da janela.

Exemplo de throttle:

function throttle(func, limit) {
  let lastFunc;
  let lastRan = 0;
  return function() {
    if (!lastRan || Date.now() - lastRan >= limit) {
      func.apply(this, arguments);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        func.apply(this, arguments);
      }, limit - (Date.now() - lastRan));
    }
  };
}

const scroll = document.getElementById('scrollArea');
scroll.addEventListener('scroll', throttle(function() {
  console.log('Rolando a página...', window.scrollY);
}, 1000));

O que o código está fazendo: Aqui, o código define uma função throttle que só permite que a função scroll seja executada a cada 1000ms (1 segundo). Mesmo que o evento de rolagem seja disparado com mais frequência, a função só será chamada uma vez por segundo.

Debounce x Throttle

A principal diferença entre debounce e throttle é o comportamento em relação ao intervalo de tempo entre as chamadas. O debounce espera até que o usuário pare de interagir com o elemento, enquanto o throttle garante que a função seja chamada a intervalos regulares, independentemente das interações do usuário.

• Debounce: Útil para eventos que não precisam ser executados até que a interação do usuário tenha terminado (exemplo: pesquisa ao digitar).
• Throttle: Útil para eventos que precisam ser executados com uma frequência controlada, como rolagem ou redimensionamento de janela.

Quando usar debounce ou throttle?

• Use debounce quando você quiser adiar a execução de uma função até que o usuário pare de interagir com o elemento. Exemplos incluem campos de pesquisa, validação de formulários e eventos de digitação.
• Use throttle quando você precisar limitar a frequência com que uma função é chamada, sem bloquear a execução. Exemplos incluem eventos de rolagem, redimensionamento de janela ou animações.

Performance e otimização

O uso de debounce e throttle pode melhorar significativamente a performance da sua aplicação, especialmente em dispositivos móveis, onde a capacidade de processamento pode ser limitada. Essas técnicas ajudam a evitar a sobrecarga de execução de funções repetidamente e permitem que o código seja mais eficiente, melhorando a experiência do usuário.

Conclusão

Debounce e throttle são técnicas cruciais para otimizar a execução de funções em resposta a eventos que ocorrem rapidamente e com alta frequência. Aplicando essas técnicas corretamente, você pode reduzir o tempo de execução e melhorar a performance geral da sua aplicação, proporcionando uma experiência mais fluida para os usuários.

Como aplicar debounce e throttle para otimizar a performance de eventos em JavaScript

Debounce e throttle são essenciais para otimizar a performance de eventos em JavaScript. Elas ajudam a controlar a execução de funções, tornando as aplicações mais eficientes e melhorando a experiência do usuário.

Algumas aplicações:

• Otimização de campos de pesquisa com digitação dinâmica (debounce).
• Controle de eventos de rolagem e redimensionamento de janela (throttle).
• Melhoria na performance de animações e transições.

Dicas para quem está começando

• Se você está lidando com eventos de rolagem ou redimensionamento, use throttle para garantir que a função não seja chamada excessivamente.
• Quando trabalhar com formulários de pesquisa ou eventos de digitação, use debounce para melhorar a performance ao adiar a execução da função até que o usuário termine de digitar.
• Lembre-se de que debounce e throttle não são a mesma coisa, e você deve escolher o mais adequado de acordo com o tipo de evento que está tratando.

Compartilhe este tutorial