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);
}

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

3 个答案: