Junior — Middle

Фарқи байни усулҳои throttling ва debouncing дар коркарди ҳодисаҳо дар JavaScript чист?

sobes.tech AI

Ҷавоб аз AI

Тротллинг ва дебаунсинг — ин техникалар барои назорати зуд-зуд даъват кардани функсияҳо ҳангоми коркарди ҳодисаҳо дар 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('Ҳодисаи ҳаракат ҳадди ақал як маротиба дар ҳар 200ms коркард мешавад');
}, 200));

Гузашта Оянда