Mi a különbség a throttling és a debouncing technikák között az eseménykezelésben JavaScriptben?

A throttling és a debouncing olyan technikák, amelyek segítségével szabályozható a JavaScript eseménykezelés során a függvényhívások gyakorisága, ezáltal elkerülve a túlzott hívásokat.

• Debouncing késlelteti egy függvény végrehajtását, amíg az esemény egy adott ideig nem fordul elő újra. Ha az esemény újra megtörténik, a timer újraindul. Ez hasznos például a felhasználói beviteli feldolgozásánál, hogy a függvény csak akkor fusson, amikor a felhasználó befejezte a gépelést.

• Throttling korlátozza egy függvény hívását egy meghatározott időintervallumra. A függvény rendszeresen meghívódik, de nem gyakrabban, mint a megadott intervallum, még akkor sem, ha az esemény gyakrabban fordul elő. Ez hasznos görgetés vagy ablakméret-változtatás eseményeinél, hogy a függvény rendszeres időközönként fusson.

Debouncing példa:

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

window.addEventListener('resize', debounce(() => {
  console.log('A resize eseményt a felhasználó méretezésének befejezése után kezeljük');
}, 300));

Throttling példa:

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('A görgetési eseményt legfeljebb egyszer 200ms-ként kezeljük');
}, 200));