Angular rxjs 去抖動以限制用戶發送多個請求

Question

基本上我的問題是，當連接速度很慢時，用戶能夠多次按下保存按鈕並且正在保存多個數據。 此問題不會在本地發生，但在暫存時會發生。

雖然我已經設置了 this.hasBeenSubmitted = true; 當請求完成並根據條件在按鈕上[禁用]時，用戶仍然能夠多次單擊按鈕並且可以保存多次，這是錯誤的。

有人說 Angular rxjs debounce 可以解決這個問題，有人能告訴我這個嗎？ 謝謝你。 根據下面的代碼，它將如何幫助我解決問題。 謝謝。

代碼

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]="form.invalid || (!duplicateMode && !form.dirty) || (!editMode) || hasBeenSubmitted"
        mat-raised-button *ngIf="form" (click)="save()" type="submit">
        <ng-container>
          <span>SAVE</span>
        </ng-container>
      </button>

Answer 1

如果我理解正確，您想限制用戶多次點擊保存，並且您說您已經應用了禁用條件。

您能否嘗試重寫您的保存按鈕，如下所示。

save(): void {
    this.hasBeenSubmitted = true;
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .pipe(
       take(1), 
       finalized(this.hasBeenSubmitted = false),
       ),
       catchError((err) =>{
          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();
      })
      .subscribe(
        (results: FeedbackRequest[]) => {

        }
      );
  }

我改變的主要事情是執行this.hasBeenSubmitted = true; 在創建呼叫之前。

我希望它有所幫助。