Как реализовать debounce для поля поиска?

Что такое debounce и зачем он нужен?

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

Как реализовать 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 = debounce((event) => {
  console.log('Search query:', event.target.value);
  // Отправка запроса на сервер
}, 300);

searchInput.addEventListener('input', handleSearch);

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

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

Вывод

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