> Что такое debounce и как он работает в JavaScript? (JavaScript)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: Garage Eight, IT-One, EPAM, ВСК

Стек: JavaScript

> Пример ответа

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

В JavaScript debounce реализуется с помощью замыкания и setTimeout. Каждый раз при вызове функции предыдущий таймер сбрасывается (через clearTimeout), и устанавливается новый. Функция выполнится только после того, как вызовы прекратятся на заданный интервал.

Пример простой реализации:

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

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

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

Здесь handleSearch будет вызван только через 300 мс после того, как пользователь перестанет печатать. Это снижает количество запросов к серверу или дорогих вычислений.