Angular，对输入“变化时”的许多 API 调用

Question

我正在使用角度 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 接收到一个事件时，它都会等待指定的时间量，以查看是否有另一个事件通过管道。如果是，它会重新启动它的计时器。当经过足够的时间而没有另一个事件流入时，它会发出最新的事件。

Answer 2

我建议你使用油门或去抖。您可以为这些编写自己的实现或使用诸如 lodash 之类的库。使用最新的 Rxjs 去抖动可能是一种解决方法。