Question

我想在最终搜索词一段时间后仅发送一个搜索api请求。例如，在我输入'hello'后的1000毫秒。它应该只发送一个请求。我正在使用Rxjs，Angular6。

我尝试了一些代码，但无法实现所需的输出。

在这里您可以找到stackblitz演示link

Answer 1

也许是这样的：

timeout = null; // at the top of your component

onKeyUp(searchString) {
 if (this.timeout) {
  clearTimeout(this.timeout) 
  // clear last Timeout so you dont get multiple Events
 }

 this.timeout = setTimeout(() => {
  // do your stuff
  console.log(searchString)
 }, 1000);
}

Answer 2

有角度的方法是使用rxjs debounceTime，该管道通过https://stackblitz.com/edit/angular-debounce-form-control valueChanges观测到反应性FormControl >

逻辑是使用FormControl获取对您输入的引用，并订阅valueChanges方法，并通过管道debounceTime来触发回调方法（仅当未在特定间隔内触发）

this.searchControl.valueChanges.pipe(debounceTime(2000))
.subscribe(res => {
    //your API call
});

键入完成后的一段时间（如单词完成后1000毫秒）发送搜索最终单词

2 个答案: