防止频繁点击相同的按钮，可观察到的角度

U rock 发表于 Dev

摇滚

我有 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

安德烈

问题是

如果用户再次单击相同的按钮，我们必须显示提示，您必须在 3 秒后等待 3 秒，他可能允许再次单击它。

所以为了解决

我们必须显示提示，嘿，你必须等待 3 秒

问题的一部分，我建议扩展 Hikmat 的答案并使用 2 个 observable，一个有throttleTime()一个没有，第一个将在需要时取消订阅后一个，然后再次重新订阅：

@ViewChildren('btn') buttons: QueryList<any>;

private subs = [];
private subscriptions = new Subscription();;

buttonlist = ["button1", "button2", "button3", "button4", "button5"];

ngAfterViewInit() {
  this.buttons.forEach((button, ind) => {
    this.subscriptions.add(
      fromEvent(button.nativeElement, 'click').pipe(
        throttleTime(3000)
      ).subscribe((e: any) => {
        this.subs[ind].unsubscribe();
        setTimeout(_ => this.listenToClick(button, ind));
        console.log(`BUTTON # ${ind}: Now is good time to do something`);
      })
    );
    this.listenToClick(button, ind);
  });
}

ngOnDestroy() {
  // unsubscribe from throttled subscriptions
  this.subscriptions.unsubscribe();
  // unsubscribe from other subscriptions
  this.subs.map(sub => sub.unsubscribe());
}

private listenToClick(button, ind) {
  this.subs[ind] = fromEvent(button.nativeElement, 'click')
    .subscribe(res => console.log(`BUTTON # ${ind}: You have to wait for 3 secs`));
}

闪电战

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。