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。