Question

我正在使用mobx为我的react Web应用程序制作API客户端，该客户端可以使用搜索结果的关键字查询服务器。

现在，为了使用户体验更好，我想实现一种即时搜索功能，例如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
}

JavaScript中的队列和“超时”异步函数调用

0 个答案: