防止持续较长呼叫覆盖较短的新呼叫

Question

我正在使用React，在我的组件中，每次用户键入输入时，代码都会调用API。但是这个API返回较少的单词要比返回较大的单词花费更多的时间。

假设我输入"ne"，并花了7秒返回100+结果，但在这7秒之前，我等待了一秒钟，并完成键入"new "。这需要几毫秒，然后在前一个API调用之前完成。

Ok, new york"出现在我的搜索中，但是现在第一个调用结束并覆盖了最后一个结果。

我怎样才能使它工作?在不破坏任何步骤的情况下(也就是，在点击按钮而不是打小费时进行搜索)，如果可能的话

我的代码的简短示例:

class MyComponent extends Component {
state = {
items = []
}

construtor(props) {
this.myCall = _debounce(this.myCall, 400);
}

myCall = async e => {
e.persist();
const query = _get(e, 'target.value', '');

try {
items = await myAPI(query)
this.setState({items})
} catch (error) {
console.error(error)
}
}
...
return (
<>
<input onChange={(e) => myCall(e)} />
{items.map(item => (
<p>item</p>
))}
</>
);
}

Answer 1

您可以在等待响应时检查输入值是否未更改:

items = await myAPI(query)
if (query === _get(e, 'target.value', '')) {
this.setState({items})
}

避免多个_get调用的实现也是如此:

const query = this.query = _get(e, 'target.value', '');
items = await myAPI(query)
if (query === this.query) {
this.setState({items})
}