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

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

它基本上订阅一个角度表单组，并调用一个方法generatePerformanceGraph来绘制svg

表单组大约有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);
  }
});

试试debounceTime，时间取决于你的毫秒。debounceTime忽略彼此相隔200毫秒内发生的事件，只接受最后一个事件

若要使用distinctUntilChanged方法，必须使用不同的方法，因为formValue是一个对象

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

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