Что такое debounce и throttle, в чём разница и где их применяют?

Оптимизация запросов к бэкенду часто включает в себя уменьшение количества запросов и контроль частоты их отправки. Например, при вводе текста в поисковую строку можно использовать техники debounce и throttle.

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

Throttle — ограничивает выполнение функции, позволяя ей вызываться не чаще, чем через заданный интервал времени. Например, если throttle установлен на 500 мс, функция будет вызвана максимум один раз в 500 мс, даже если события происходят чаще.

Разница:

• Debounce откладывает вызов до окончания серии событий.
• Throttle гарантирует вызов функции с определённой частотой во время серии событий.

Пример debounce на JavaScript:

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

const fetchSuggestions = debounce((query) => {
  fetch(`/api/search?q=${query}`)
    .then(res => res.json())
    .then(data => console.log(data));
}, 300);

inputElement.addEventListener('input', (e) => {
  fetchSuggestions(e.target.value);
});