Как избежать слишком частых запросов к серверу при реализации поиска с автокомплитом?

1. Debounce – отправляет запрос только после паузы в вводе:

   function debounce(func, delay) {
   	let timeout;
   	return function() {
   		clearTimeout(timeout);
   		timeout = setTimeout(() => func.apply(this, arguments), delay);
   	};
   }
   const searchInput = document.getElementById('search');
   searchInput.addEventListener('input', debounce(function() {
   	fetchResults(this.value); // Запрос к серверу
   }, 300));

2.  Throttle – ограничивает частоту запросов (например, не чаще чем раз в 500 мс):

   function throttle(func, limit) {
   	let inThrottle;
   	return function() {
   		if (!inThrottle) {
   			func.apply(this, arguments);
   			inThrottle = true;
   			setTimeout(() => inThrottle = false, limit);
   		}
   	};
   }

Разница:

• Debounce – лучше для автокомплита (ждет окончания ввода).

• Throttle – полезен при скролле или resize (гарантирует периодические вызовы).

Пример с Lodash (библиотека с готовыми функциями):

import { debounce } from 'lodash';
searchInput.addEventListener('input', debounce(fetchResults, 300));