误操作场景描述

对于双击/频繁点击的场景有时候并非恶意的攻击行为。

如网络延迟导致用户下意识多点击一次、又比如鼠标硬件异常出现单击变双击的情况。

当功能按钮被频繁点击将意味着多次向服务端发起数据请求。

在异步数据传输广泛的今天，很容易出现数据重复，数据库唯一校验失败，展示异常的情况。

举个简单易懂的例子：

比如在购物车中选中某个商品进行删除，如果无意间触发了频繁点击，界面可能提示商品不存在。

实际上是因为第一次触发删除服务端已经删除了此商品，第二次则会提示商品不存在。

这样的场景用户体验较差，此外如果一些关键性的功能没有增加频繁操作的预防措施，极有可能出现冗余的重复数据。

通过 JS 预防频繁点击误操作有很多种方式，主要分为两种，一种是只允许操作一次和限制时间或返回数据后放开操作限制。

只许一次

如果界面中的某个按钮仅允许操作一次的实现逻辑非常简单。

在需要限制的方法外，页面中定义一个变量 cFlag（点击开关），默认为 true。

首次点击进入后，直接关闭开关，然后执行后续的操作。

//默认点击开关打开
var cFlag = true;
//提交方法
function submitForm() {
  if (cFlag) {
    //首次点击进入方法直接关闭开关
    cFlag = false;
    //执行后续ajax提交逻辑
    //略
  } else {
    //如果希望增加一些友情提示可以增加else分支
    alert('请勿频繁提交');
  }
}
​

限定时间或返回数据后放开限制

如果界面的按钮可以点击多次，但是想限制重复点击的时间。

我们可以在代码中增加一个恢复开关的语句

实例代码如下：

//默认点击开关打开
var cFlag = true;
//提交方法
function submitForm() {
  if (cFlag) {
    //首次点击进入方法直接关闭开关
    cFlag = false;
    //执行后续提交ajax逻辑
    //返回数据后放开限制的场景，可以再ajax的返回方法中添加cFlag = true;
    //代码执行完后增加定时恢复开关
    //5秒钟恢复点击开关
    setTimeout(function() {
      cFlag = true;
    },
    5000);
  } else {
    //如果希望增加一些友情提示可以增加else分支 
    alert('重复提交需要等待5秒');
  }
}
​

限制时间优化提示

如某功能按钮需要间隔 30 秒提交一次，时间过去 15 秒后，用户点击了给予提示还需要等待 15 秒。

该能力不建议完全通过 JS 实现（可以通过服务端来计算时间直接返回提示）。

并不是 JS 不能够实现，如果用户在 10 秒的时候刷新一下页面，计时就会被重置，这个限制就相当于存在漏洞。

但对于流程性强的页面实际还是可以使用的，因为这类页面一旦刷新就需要用户从头操作。

//提交按钮触发
$('#submit').click(function() {
  var nowTime = new Date().getTime();
  //给这个按钮增加一个点击事件的属性
  var clickTime = $(this).attr('clickTime');
  //存在点击时间说明被点击过，判断当前时间和单击时间 
  if (clickTime != "undefined" && (nowTime - clickTime < 30000)) {
    var waitTime = 30000 - nowTime + clickTime;
    waitTime = Math.parseInt(waitTime / 1000);
    alert('您需要在' + waitTime + '秒后方可提交');
    return false;
  } else {
    //刷新最新的点击时间
    $(this).attr('clickTime', nowTime);
    //执行后续提交逻辑
    //略
  }
});
​

结尾小结

预防频繁点击可以减少数据库产生冗余数据的风险。

由于频繁点击产生的报错可能会覆盖首次点击的正常返回信息，会给用户造成很大的困扰。

同样，服务端也要考虑引入分布式锁来限制频发请求或做好幂等管理。