如何订阅最后一个可观察对象并在 rxjs 中执行一个函数？

Question

您好，我的项目中有一小段代码。

它基本上订阅了一个 angular 表单组并调用了一个绘制 svg 的方法 generatePerformanceGraph。

表单组有大约 6 个表单控件。问题是有时当我更改表单控件的值时，它会将另一个值设置为另一个表单控件。结果，当我更改某些表单控件值时，它会导致多次调用 generatePerformanceGraph。我怎样才能防止这个问题。

简而言之，基本上我想要的是当表单组发生变化时，我想订阅最后一个可观察对象，然后执行一次 generatePerformanceGraph。

this.formGroup.valueChanges.subscribe(formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});

我尝试了以下方法，但效果不佳。

this.formGroup.valueChanges.
pipe(
  distinctUntilChanged()
) .subscribe( formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});

Answer 1

尝试debounceTime，ms时间由你决定。 debounceTime 忽略彼此 200ms 内发生的事件，只接受最后一个事件。

https://www.learnrxjs.io/learn-rxjs/operators/filtering/debouncetime

this.formGroup.valueChanges.
pipe(
  debounceTime(200),
) .subscribe( formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});

要采用 distinctUntilChanged 方式，您必须采用不同的方式，因为 formValue 是一个对象。

this.formGroup.valueChanges.
pipe(
  distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),
) .subscribe( formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});

如何订阅最后一个可观察对象并在 rxjs 中执行一个函数？

how to subscribe to the last observable and execute a funtion in rxjs?

rxjs

rxjs5