时间戳

首页 > 解决方案 > Angular rxjs 去抖动

javascript - Angular rxjs 去抖动

问题描述

基本上我的问题是，当连接速度很慢时，用户能够多次按下保存按钮并且正在保存多个数据。此问题不会在本地发生，但在暂存时会发生。

虽然我已经设置了 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]="hasBeenSubmitted"
            mat-raised-button *ngIf="form" (click)="save()" type="submit">
            <ng-container>
              <span>SAVE</span>
            </ng-container>
          </button>

标签： javascriptangularjstypescript

解决方案

此时您在请求完成后设置 hasBeenSubmitted。但由于请求可能需要一些时间，因此用户可以在此期间再次按下按钮。您可以在保存数据之前设置标志：

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();
        }
      );
  }

推荐阅读