Самописный debounce‑механизм

Условие

Реализуйте собственную функцию debounce, которая ограничивает частоту вызовов переданной функции.

const requestUrl = (url) => {
    console.log(`fetching ${url}...`);
}

function debounce(func, delay) {
    // реализуйте логику debounce
}

const debouncedFetch = debounce(requestUrl, 300);

debouncedFetch(1);
debouncedFetch(2);
debouncedFetch(3);
debouncedFetch(4);
debouncedFetch(5);

Ответ

Обёртка должна хранить общий таймер между вызовами и каждый раз перезапускать его с последними аргументами. Для примера будет один вывод 'fetching 5...' после паузы 300 мс.

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

debouncedFetch создаётся один раз, затем используется для всей серии событий. При постоянном потоке вызовов выполнение откладывается до наступления паузы. Возвращаемое значение func не возвращается синхронно из обёртки. Для отмены перед размонтированием можно добавить метод cancel с clearTimeout.