Когда использовать debounce

Debounce полезен, когда нужно ограничить частоту вызова функции, особенно при обработке частых событий (например, ввод в поле поиска, изменение размеров окна, скролл). Он откладывает выполнение функции до тех пор, пока не пройдет заданное время без новых вызовов.

Пример с поиском:

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

const searchInput = document.getElementById('search');
const handleSearch = () => console.log('Searching...');

searchInput.addEventListener('input', debounce(handleSearch, 300));

Основные случаи использования:

• Поиск с автодополнением
• Обработка resize/scroll событий
• Сохранение формы при вводе
• Фильтрация данных в реальном времени

Debounce уменьшает нагрузку, предотвращая избыточные вычисления/запросы.