Я создаю клиент API для моего веб-приложения реагирования с помощью mobx, который может запрашивать результаты поиска на сервере с ключевыми словами.
Теперь, чтобы улучшить взаимодействие с пользователем, я хочу реализовать функцию мгновенного поиска, такую как окно поиска Google, которая будет постоянно отправлять запросы на сервер и постоянно обновлять результаты поиска.
Прямо сейчас я наивно отправляю новый запрос на сервер каждый раз, когда изменяется состояние поля ввода. Однако это не очень эффективно и может взорвать сервер, если пользователь очень быстро печатает длинный запрос. 30-символьный поисковый запрос отправит на сервер 30 запросов, и если я не буду ждать этих запросов для последовательного разрешения на стороне клиента, конечный результат, доставленный в поле результатов поиска, не обязательно будет правильным. (когда предыдущий запрос разрешается позже, чем последний запрос)
Есть ли хороший способ и стратегия «ставить в очередь» поисковые запросы, только отправляя новый запрос поверх очереди, скажем, в 200 мс, и отключая / оставляя все остальные поисковые запросы, которые устарели? Возможно также отправить запрос, когда пользователь перестанет печатать на 50 мс.
Так, скажем, пользователь вводит свой запрос за 300 мс, тогда будет только 2 вызова: первый - это наполовину завершенный запрос через 200 мс после того, как он / она начал связывать, второй - 350 мс, через 50 мс после того, как он / она она закончила печатать.
Например:
// the search function that I want to queue
async function searchFor(term) {
return await client('search', term)
}
// the event handler for input field updates
async function handleChange(event) {
this.setState({term: event.target.value})
await queryEnqueue(() => searchFor(event.target.value)) // the function that I'm looking for
}