Aký je rozdiel medzi technikami throttling a debouncing pri spracovaní udalostí v JavaScript?

Throttling a debouncing sú techniky na kontrolu frekvencie volania funkcií pri spracovaní udalostí v JavaScripte, aby sa predišlo nadmerným volaniam.

• Debouncing odkladá vykonanie funkcie, kým sa udalosť prestane opakovane volať počas určitého času. Ak sa udalosť znovu stane, časovač sa resetuje. Toto je užitočné napríklad pri spracovaní vstupu používateľa, aby sa funkcia spustila až po tom, čo používateľ prestane písať.

• Throttling obmedzuje volanie funkcie na stanovený časový interval. Funkcia bude volať pravidelne, ale nie častejšie ako určený interval, aj keď sa udalosť vyskytne častejšie. Je to vhodné pre udalosti ako posúvanie alebo zmena veľkosti okna, aby funkcia bežala v konštantných intervaloch.

Príklad 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('Udalosť resize spracovaná po tom, čo používateľ prestane meniť veľkosť');
}, 300));

Príklad 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('Udalosť posúvania spracovaná maximálne raz za 200ms');
}, 200));