如何防止表单按钮被点击很多次非常快答案

【问题标题】：How can I prevent a form button being clicked lots of times very fast如何防止表单按钮被点击很多次非常快
【发布时间】：2016-05-15 10:01:11
【问题描述】：

如何防止表单按钮被快速点击多次？

我正在使用 html5 和 angular2。

目前他们只需点击即可加载。

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

【问题讨论】：

我对angular2一无所知，但是我们曾经使用超时来等待一段时间使按钮在单击angularjs后启用一次

标签： html angular

【解决方案1】：

它不是特定于 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);
}

【讨论】：

【解决方案2】：

按钮执行什么类型的工作？是表单提交还是刷新页面按钮！最好的解决方案是在用户单击按钮后立即禁用它，以防您没有导航到其他页面。

参考这个 https://stackoverflow.com/a/18130876/5888071

希望这会有所帮助。

【讨论】：

【解决方案3】：

你可以试试这样的：

@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

【讨论】：