javascript - Angular，对输入 'on-change' 上的许多 API 调用

Question

我正在使用 Angular 8。

有一个自动完成输入，如果它的值发生变化，我必须调用 API 并为此输入加载新建议。

  //In Template

  <autocomplate [suggestions]="suggestions" (filterChange)="filterChange($event)"></autocomplate>



  //In Component

  filterChange(e) {
    console.log(e)
    this.loadSubscriptions(e ? { 'filterItem.name': e  } : {})
  }

  loadSubscriptions(params) {
     if (this.suggestionsSubscriber) this.suggestionsSubscriber.unsubscribe()
     this.suggestionsSubscriber = this.suggestionsService.loadData(params).subscribe(
        data => this.suggestions = data
     })
  }

一切正常，但问题是当用户快速键入时，应用程序会发出许多请求。

如果用户输入速度很快，我能以某种方式延迟请求吗？例如，当用户正在输入时，不要在每次更改时都调用 API，如果用户停止输入，则调用 API。

或者如果你有更好的方法来解决这个问题，欢迎分享。

Answer 1

使用 RXJS denounceTime 运算符。只需将它链接到您的 Observable。

每当 debounceTime 收到一个事件时，它会等待一段指定的时间，以查看是否有另一个事件从管道中传出。如果是，它将重新启动其计时器。当经过足够长的时间而没有另一个事件流入时，它会发出最新的事件。