Реализация функции дебаунса

Условие

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

Ответ

Замкните ID таймера, отменяйте его при новом вызове и вызывайте функцию только после паузы. Используйте обычную функцию для обёртки, чтобы сохранить this.

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

Это trailing debounce: первый вызов тоже откладывается. Аргументы и контекст берутся из последнего обращения. В отличие от throttle, постоянный поток событий способен откладывать выполнение бесконечно. При использовании в компоненте добавьте метод cancel для очистки таймера при уходе со страницы.