如何防止单击很多次的表单按钮非常快

Question

如何防止单击很多次的表单按钮的速度非常快？

我正在使用html5和angular2。

目前他们只能点击它的加载。

我需要只允许一次，如果可能或至少他们必须等待2秒后再次单击它。

Answer 1

你可以尝试这样的事情：

@Component({ 
    (...) 
    template: ` 
    <div (click)="handleClick()">Click</div> 
    ` 
}) 
export class MyComponent { 
    constructor() { 
    this.clicked = false; 
    } 

    handleClick() { 
    if (!this.clicked) { 
     this.clicked = true; 
     setTimeout(() => { 
     this.clicked = false; 
     }, 2000); 
    } 
    } 
} 

我想，你也可以利用的Rx（这取决于使用情况）和debounceTime操作：

从发出一个项目源Observable在特定时间段过去之后没有Observable忽略任何其他项目。

这使得当点击了大量的时间非常快的时间量后，仅触发最后一个事件（这里是500毫秒）：

this.ctrl.valueChanges.debounceTime(500).mergeMap(
    val => { 
    return this.http.get('https://api.github.com/users?d='+val); 
    }).subscribe(
    data => { 
     console.log(data); 
    } 
); 

此示例显示了这种行为，当用户填写的输入。

您可以将此与setTimeout混合在一起再次启用处理一段时间。

Rob Wormald就这些问题提出了建议。请参阅此链接了解详情：

• https://github.com/angular/angular/issues/4062

Answer 2

什么类型的作业按钮的功能吗？它是一个表单提交或刷新页面按钮！最好的解决方案是在用户点击按钮后立即禁用该按钮，以免导航到不同的页面。

请参阅本 https://stackoverflow.com/a/18130876/5888071

希望这有助于。

Answer 3

这不是具体到angular2，但我用这个去抖动功能调用：

function debounce(delay, fn, fnArgsArray){ 
    if(typeof fn.debouncing === 'undefined' || fn.debouncing == false){ 
     fn.debouncing = true; 
     setTimeout(() => fn.debouncing = false, delay); 
     fn.apply(this, fnArgsArray); 
    } 
} 

例如：

<button onclick="debounce(2000, add, [2, 4]);">testen</button>

function add(a, b){ 
    var sum = a + b; 
    console.log(a + " + "+ b + " = " + sum); 
}