Junior — Middle

JavaScriptте окуяларды иштетүүдө throttling жана debouncing техникаларынын айырмасы эмнеде?

sobes.tech AI

AIден жооп

Throttling жана debouncing — бул JavaScriptте окуяларды иштетүү учурунда функцияларды чакыруунун ылдамдыгын көзөмөлдөө үчүн техникалар, ашыкча чакырууларды алдын алуу үчүн.

Debouncing функциянын ишке ашырылышын кечеңдетет, ал эми окуя белгилүү убакытка чейин кайра болбой калса. Эгер окуя кайра болсо, таймер кайра башталат. Бул, мисалы, колдонуучу киргизүүнү иштетүүдө, функция колдонуучу жазууну аяктагандан кийин гана ишке кирет дегенди камсыз кылуу үчүн пайдалуу.
Throttling функцияны белгилүү бир убакыт аралыгында чакырууга чектейт. Функция дайыма чакырылат, бирок көрсөтүлгөн интервалдан ашпайт, эгерде окуя көбүрөөк болсо да. Бул скролдоо же терезенин өлчөмүн өзгөртүү окуялары үчүн ыңгайлуу, функция туруктуу интервалдарда иштейт.

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('Колдонуучу өлчөмдү өзгөртүүнү токтоткондон кийин resize окуясы иштетилет');
}, 300));

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('Максимум бир жолу 200мс ичинде scroll окуясы иштетилет');
}, 200));

Мурунку Кийинки