Как передавать аргументы в debounce-функцию?

Передача аргументов в debounce-функцию

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

Как это работает

Внутри debounce создаётся замыкание, которое хранит таймер. Возвращаемая функция использует rest-оператор для сбора всех переданных аргументов в массив. Затем, при срабатывании таймера, эти аргументы передаются в исходную функцию через apply или call, что позволяет сохранить контекст this.

Пример кода

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

// Использование
const searchInput = document.getElementById('search');
const handleSearch = debounce((query) => {
  console.log('Поиск:', query);
}, 300);

searchInput.addEventListener('input', (e) => {
  handleSearch(e.target.value);
});

Где применяется

• Обработка ввода в поисковых строках
• Ресайз окон
• Скролл-события

Вывод: передача аргументов через rest-оператор и apply — стандартный способ реализации debounce, который обеспечивает гибкость и правильную работу с любыми параметрами.