如何防止表单按钮被非常快速地单击很多次

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运算符：

在特定时间跨度过后，从源可观察量发出项目，而不省略任何其他项目。

这允许在非常快地点击大量时间后（此处为 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);
}