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 取消订阅那些在延迟期间到达的 observables。 我错过了什么？

Answer 1

在订阅 observable 之前使用 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);
    });
}

较新的 Angular 版本：

在较新的 Angular（或准确地说是 RxJS）版本中，您需要通过以下方式管道操作符：

ngOnInit() {
    this.filterSubject = new Subject<ValueType>();
    this.filterSubject.pipe(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 here

所以如果你的 source 是一个输入，你可以这样使用它：

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

这样，backendCall 会在你停止输入 500ms 后被调用。