Qual é a diferença entre a técnica de throttling e debouncing no tratamento de eventos em JavaScript?

Throttling e debouncing são técnicas para controlar a frequência de chamadas de funções ao lidar com eventos em JavaScript, para evitar chamadas excessivas.

• Debouncing retarda a execução de uma função até que o evento deixe de ocorrer durante um determinado período de tempo. Se o evento ocorrer novamente, o temporizador é reiniciado. Isto é útil, por exemplo, ao processar a entrada do utilizador, para que a função só seja acionada após o utilizador terminar de digitar.

• Throttling limita a chamada de uma função a um intervalo de tempo definido. A função será chamada regularmente, mas não mais frequentemente do que o intervalo especificado, mesmo que o evento ocorra com maior frequência. É útil para eventos de scroll ou redimensionamento de janela, para que a função seja acionada a intervalos constantes.

Exemplo de debouncing:

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

window.addEventListener('resize', debounce(() => {
  console.log('Evento de redimensionamento tratado após o utilizador parar de redimensionar');
}, 300));

Exemplo de throttling:

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Evento de scroll tratado no máximo uma vez a cada 200ms');
}, 200));