javascript - 通过 Angular 观察防止频繁点击同一按钮

Question

我有 5 个按钮列表，每次单击按钮时，我们都必须允许第一次记录该特定按钮。如果用户再次单击同一按钮，我们必须显示提示，嘿，您必须等待 3 秒，3 秒后他可能会允许再次单击它。这必须分别适用于 5 个按钮。

那么我们如何使用 Observable 来实现这一点呢？我们有 fromevent 方法，但我不知道如何将它用于此特定任务。

<div *ngFor="let button of buttonlist">
  <button (click)="buttonClicked(button)">{{button}}</button>
</div>



buttonClicked(button) {
    for(var i=0; i<this.buttonlist.length; i++) {
      if(button == this.buttonlist[i]) {
        // here first time we have to allow if click it on same button again don't allow wait for 3 seconds then allow 
      }
    }
  }

您可以在这里找到工作示例 https://stackblitz.com/edit/angular-6srmgj?file=src%2Fapp%2Fapp.component.ts

Answer 1

认为这就是您想要的 code

<div *ngFor="let button of buttonlist">
  <button #btn>{{button}}</button>
</div> 

<小时/>

  buttonlist = ["button1", "button2", "button3", "button4", "button5"];
  @ViewChildren('btn') buttons:QueryList<any>;

  ngAfterViewInit() {
    this.buttons.forEach(button => {
      fromEvent(button.nativeElement, 'click').pipe(
        map(e => ({ e: e, t: setTimeout(() => console.log('wait...')) })),
        throttleTime(3000)
      ).subscribe((args: any) => {
        clearTimeout(args.t);
        console.log(args.e.target.innerHTML)
      });
    });
  }