Debounce и throttle

Две базовые функции для событий ввода, скролла и resize: debounce откладывает вызов, throttle ограничивает частоту.

// Вызовет fn только после паузы в `wait` мс без новых вызовов.
function debounce(fn, wait = 300) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}

// Пропустит не более одного вызова fn за `limit` мс.
function throttle(fn, limit = 300) {
  let waiting = false;
  return function (...args) {
    if (waiting) return;
    fn.apply(this, args);
    waiting = true;
    setTimeout(() => { waiting = false; }, limit);
  };
}

const search = debounce((e) => console.log('Поиск:', e.target.value), 500);
document.querySelector('#q')?.addEventListener('input', search);

window.addEventListener('scroll', throttle(() => {
  console.log('Прокрутка:', window.scrollY);
}, 200));