Controle de Frequência de Execução em JavaScript com Throttle Function

Disparar eventos de alta frequência como scroll, resize ou mousemove desordenadamente pode travar a interface e sobrecarregar o processamento do navegador. A implementação de uma função Throttle resolve esse gargalo garantindo que uma determinada função seja executada no máximo uma vez a cada intervalo fixo de milissegundos.

JavaScript

/**
 * Limita a execução de uma função para no máximo uma vez a cada 'limite' ms.
 * @param {Function} funcao - A função a ser executada.
 * @param {number} limite - O intervalo em milissegundos (ex: 300).
 * @returns {Function} Função envelopada com controle de taxa de execução.
 */
function throttle(funcao, limite) {
  let emEspera = false;

  return function (...args) {
    // Se ainda estiver dentro do intervalo, bloqueia a nova execução
    if (!emEspera) {
      funcao.apply(this, args);
      emEspera = true;

      // Libera a execução novamente após decorrido o tempo limite
      setTimeout(() => {
        emEspera = false;
      }, limite);
    }
  };
}

// --- Exemplo Prático de Uso ---
function registrarPosicaoScroll() {
  console.log(`Scroll processado em: ${new Date().toLocaleTimeString()}`);
}

// Envelopa a função original para rodar no máximo a cada 1000ms (1 segundo)
const scrollOtimizado = throttle(registrarPosicaoScroll, 1000);

// Simulação de chamadas rápidas consecutivas
scrollOtimizado(); // Executa imediatamente
scrollOtimizado(); // Ignorado (bloqueado pelo intervalo)
scrollOtimizado(); // Ignorado (bloqueado pelo intervalo)

setTimeout(() => {
  scrollOtimizado(); // Executa novamente após decorrer 1,2s
}, 1200);

Pontos-chave

• Diferença entre Throttle e Debounce: O Throttle garante execuções em intervalos regulares previsíveis, enquanto o Debounce aguarda o usuário pausar a ação para executar o código uma única vez.
• Preservação do Contexto (this e argumentos): O uso do método .apply(this, args) assegura que a função original mantenha o seu contexto de execução correto e receba todos os parâmetros passados pelo evento.
• Uso em Eventos DOM: Ideal para otimizar handlers como window.onscroll, chamadas de API em tempo real durante rolagem infinita e atualizações de layout na redimensionamento da janela.
• Gestão de Memória: Para aplicações de grande porte (SPAs), lembre-se de remover os event listeners apontando para a função envelopada ao desmontar componentes para evitar memory leaks.