所属分类 WEB

误操作场景描述

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

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

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

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

举个简单易懂的例子：

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

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

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

通过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);
        //执行后续提交逻辑
        //略
    }
});