Angular rxjs 去抖

Question

Basically my issue is that when the connection is slow the user was able to press the save button multiple times and multiple data are being save. This issue does not occur locally but on staging it does.

Although I already have set this.hasBeenSubmitted = true; when the request is done and [disabled] on the button based on the condition user was still able to click the button multiple times and could save multiple times which is wrong.

Some say that Angular rxjs debounce can be solution to this, can someone enlighten me regarding this one? Thank you. And how would it help my issue based on the code below. Thanks.

Code

save(): void {
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .subscribe(
        (results: FeedbackRequest[]) => {
          this.hasBeenSubmitted = true;
        },
        (error) => {
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
          create.unsubscribe();
        }
      );
  }

html

<button [disabled]="hasBeenSubmitted"
            mat-raised-button *ngIf="form" (click)="save()" type="submit">
            <ng-container>
              <span>SAVE</span>
            </ng-container>
          </button>

Answer 1

At this point you set hasBeenSubmitted after the request is done. But since the request can take some time, the user can press the button again during this time. You can set the flag before the data is being saved:

save(): void {
    this.hasBeenSubmitted = true;
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .subscribe(
        res => {},
        (error) => {
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
          create.unsubscribe();
        }
      );
  }