javascript - 如何在异步函数调用结束之前禁用按钮？

Question

我在前端有一个按钮，它调用一个异步方法，然后调用外部 REST Controller 来刷新(删除当前 -> 创建新的)日历。问题是，如果在第一个 REST 调用过程完成之前多次单击该按钮，则会创建多个日历。我想禁用刷新按钮，直到异步方法(及其内部的 REST 调用)完成。如何才能实现这一目标？我正在使用 Angular4。

我尝试使用在调用函数后立即设置的标志，并在函数结束时重置它。这不起作用。

HTML 按钮代码:

<!-- refresh button -->
<button md-button type="button" class="mat-button active (click)="refreshCalendar(team)">
  Refresh
</button>

异步刷新日历方法:

  async refreshCalendar(teamName: string) {
    // Some code ..

    this.calendarSvc.refreshCalendarForTeam(teamId);
  }

异步刷新CalendarForTeam方法:

  async refreshCalendarForTeam(teamId: number) {
    // URL creation ..

    return this.http.post(url, {}) // REST call here
      .map(response => {
        return response.toString();
      }).subscribe(() => { });
  }

Answer 1

只需使用变量IsCalling:boolean=false。您的代码将如下所示:

IsCalling:boolean=false

callAsyncFunction()
{
    IsCalling=true;

    async refreshCalendar(teamName: string) {
        // Some code ..
        IsCalling=false;
        this.calendarSvc.refreshCalendarForTeam(teamId);
    }
}

你的 HTML 是

<button [disabled]='IsCalling' md-button type="button" class="mat-button active (click)="refreshCalendar(team)">
  Refresh
</button>