Создание функции с эффектом debounce

Условие

Напишите функцию debounce, которая ограничивает частоту вызова переданной функции, откладывая её выполнение на указанный интервал времени (в миллисекундах). В примере ниже вывод console.log('API call') должен происходить не чаще, чем раз в 300 мс после последнего вызова.

const debouncedFn = debounce(() => console.log('API call'), 300);

debouncedFn();

Ответ

Debounce перезапускает таймер при каждом вызове и выполняет функцию после 300 мс тишины. Это не throttle: при непрерывном вводе вызов может откладываться неограниченно.

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

Сохраняются this и аргументы последнего вызова. Метод cancel полезен при уничтожении компонента или отмене поиска. Номинальная задержка задаёт минимальное ожидание, а не точное время. Уже начавшийся сетевой запрос таким cancel не отменяется — для него нужен отдельный механизм.