Функция debounce для отложенного вызова

Условие

Необходимо создать функцию debounce, принимающую на вход целевую функцию fn и длительность задержки timeout (в миллисекундах). Функция должна возвращать новую обёртку, которая будет вызывать fn только после того, как с момента последнего обращения к ней пройдет указанный интервал. Если обёртка вызывается повторно до истечения тайм‑аута, текущий таймер отменяется и запускается заново.

function debounce(fn, timeout) {
    // Реализация
}

const fn = debounce(() => console.log('fn'), 300);
fn();
fn();
fn();
// Ожидаемый вывод: 'fn' (один раз через 300 мс после последнего вызова)

Ответ

При каждом вызове очищайте предыдущий таймер и создавайте новый. Сохраняйте this и последние аргументы, чтобы обёртка не меняла способ вызова функции.

function debounce(fn, timeout) {
  let timer;
  function wrapped(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
      fn.apply(this, args);
    }, timeout);
  }
  wrapped.cancel = () => { clearTimeout(timer); timer = undefined; };
  return wrapped;
}

Это trailing-вариант: выполнение происходит после паузы, а не при первом обращении. Обёртка не возвращает синхронно результат fn. Три быстрых вызова создадут одно фактическое выполнение; при размонтировании компонента можно вызвать cancel().