Да, конечно, я могу помочь с улучшением этого скрипта. Из описания проблемы предположу, что вы используете `setTimeout` для создания задержки в выполнении функции поиска и возможно сталкиваетесь с известной проблемой множественного выполнения функции поиска, если пользователь вводит несколько значений подряд. Примеры дублирования результатов происходят из-за того, что каждый новый ввод пользователя создаёт новый таймер, и все эти таймеры выполняют функции независимо.
Один из способов решения этой проблемы — использование паттерна "debounce". "Debounce" помогает гарантировать, что функция выполнится только после того, как события перестанут срабатывать на определенное время. В вашем случае, это будет означать, что поисковый запрос отправится только после того, как пользователь перестанет вводить текст на 350 мс.
Вот пример реализации функции "debounce":
```javascript
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// Это функция, выполняющая ваш поиск.
function executeSearch(query) {
// Здесь логика очистки предыдущих результатов и выполнения нового поиска.
console.log('Поиск для:', query);
}
// Создаем функцию с "debounce", которая задерживает выполнение до 350 мс.
const debouncedSearch = debounce(executeSearch, 350);
// Предположим, inputElement - это элемент ввода, на который вы хотите повесить этот обработчик.
inputElement.addEventListener('input', (event) => {
debouncedSearch(event.target.value);
});
```
Теперь, когда пользователь начинает вводить текст, предыдущий таймер будет отменяться и создаваться новый, тем самым обеспечивая выполнение `executeSearch` только один раз после последнего ввода.
Используя этот подход, вы должны избавиться от проблемы дублирования результатов и улучшить пользовательский опыт на вашем сайте.