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

Question

Используют дебаунсинг (debounce) или троттлинг (throttle). Дебаунс ждет, пока пользователь перестанет печатать (например, 300 мс), и только тогда отправляет запрос.

YeaHub · Accepted Answer

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)); 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));