Angular：如何使用Observable.timer（）和switchMap來消除函數調用的反跳？

Question

這是我的方法：

  filter(value) {    
    this.backendCall(value)    
  }

我想在后端調用之間放置一個延遲，以免在每次使用Observable.timer（）和switchMap的擊鍵時都調用我的方法。

舉例來說，我從異步驗證器獲得了這段代碼，該代碼正是我想要的 ：

export function createAsyncValidator(checkFn: (value: string) => Observable<Boolean>, errorMessage: string) {
    return (control: AbstractControl): Observable<ValidationErrors> => {
        return Observable.timer(500).switchMap(() => {
            return checkFn(control.value)
                .map(result => (result ? null : { [errorMessage]: true }));
        });
    }
}

...但是我正在努力將其應用於我的方法 。 這是我嘗試過的：

  filter(value) {
    Observable.timer(500).switchMap(() => {
      return Observable.of(value);
    }).subscribe(() => {
      console.log('filter', value);
      // this.backendCall(value)
    });
  }

確實會應用該延遲，但是會記錄所有值 。 我期望swithMap取消訂閱延遲期間到達的那些可觀察對象。 我在這里想念什么？

Answer 1

訂閱可觀察對象之前，請使用debounceTime 。

在您的過濾器函數中，發出帶有該值的事件，並在訂閱中以添加的debounceTime做出反應。

filter(value: ValueType) {
    this.filterSubject.next(value);
}

ngOnInit() {
    this.filterSubject = new Subject<ValueType>();
    this.filterSubject.debounceTime(500).subscribe((value: ValueType) => {
        this.backendCall(value);
    });
}

Answer 2

首先，我認為您只是錯過了return語句：

filter(value) {
    -->return<-- Observable.timer(500).switchMap(() => {
      return Observable.of(value);
    }).subscribe(() => {
      console.log('filter', value);
      // this.backendCall(value)
    });
  }

但是我真的不明白您要在這里提出的邏輯。

編輯此評論后：

我希望僅在完成輸入后才進行后端調用（例如，延遲一秒鍾）。 油門會立即將我的第一個按鍵發送到后端

您可以簡單地使用debounceTime運算符來實現這種行為。

doc在這里

因此，如果您的來源是輸入，則可以通過以下方式使用它：

<myFormControl>.valueChanges.debounceTime(500).flatMap(value => {
    return this.backendCall(value);
}).subscribe();

這樣，在您停止鍵入后，將調用backendCall 500ms。