gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:26:07 24 4
gpt4 key购买 nike

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

最佳答案

认为这就是您想要的 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)
});
});
}

关于javascript - 通过 Angular 观察防止频繁点击同一按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51569654/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com