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

Question

[嗨，我的项目中有一个小代码段。

它基本上订阅了一个角形组，并调用了一个绘制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);
  }
});