Ի՞նչ տարբերություն կա JavaScript-ում իրադարձությունների մշակման ժամանակ throttling և debouncing տեխնիկաների միջև։

Throttling և debouncing-ը տեխնիկաներ են, որոնք թույլ են տալիս վերահսկել JavaScript-ում իրադարձությունների մշակման ժամանակ ֆունկցիաների կանչման հաճախականությունը՝ կանխելու ավելորդ կանչերը:

• Debouncing հետաձգում է ֆունկցիայի կատարմանը՝ մինչև որ իրադարձությունը դադարեցվի որոշ ժամանակով: Եթե իրադարձությունը կրկին տեղի ունենա, ժամկետը վերականգնվում է: Սա օգտակար է, օրինակ, օգտվողի մուտքային տվյալների մշակման ժամանակ, որպեսզի ֆունկցիան գործարկվի միայն այն ժամանակ, երբ օգտվողը ավարտի մուտքագրումը:

• Throttling սահմանափակում է ֆունկցիայի կանչումը որոշ ժամանակային միջակայքով: Ֆունկցիան կանչվում է ռեգուլյար, բայց ոչ ավելի հաճախ, քան նշված միջակայքը, նույնիսկ եթե իրադարձությունը տեղի ունենա ավելի հաճախ: Սա հարմար է սքրոլինգի կամ պատուհանի չափի փոփոխության դեպքերում, որպեսզի ֆունկցիան աշխատի կայուն ժամանակացույցով:

Դեբաունսինգի օրինակ:

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

window.addEventListener('resize', debounce(() => {
  console.log('Resize իրադարձությունը մշակվում է օգտատիրոջ կողմից չափի փոփոխությունը դադարեցնելուց հետո');
}, 300));

Թրոթլինգի օրինակ:

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('Սքրոլի իրադարձությունը մշակվում է առավելագույնը մեկ անգամ յուրաքանչյուր 200մս');
}, 200));