如何避免用户多次点击造成的多次请求

我们在访问有的网站，输入表单完成以后，单击提交按钮进行提交以后，提交按钮就会变为灰色，用户不能再单击第二次，直到重新加载页面或者跳转。这样，可以一定程度上防止用户重复提交导致应用程序上逻辑错误。

还有很多其他的方式进行防止重复点击提交，如

1、定义标志位：

点击触发请求后，标志位为false量；请求（或者包括请求后具体的业务流程处理）后，标志位为true量。通过标志位来判断用户点击是否具备应有的响应。

2、卸载及重载绑定事件：

点击触发请求后，卸载点击事件；请求（或者包括请求后具体的业务流程处理）后，重新载入绑定事件。

3、替换（移除）按钮DOM

点击触发请求后，将按钮DOM对象替换掉（或者将之移除），自然而然此时不在具备点击事件；请求（或者包括请求后具体的业务流程处理）后，给新的按钮DOM定义点击事件。

　　不妨引深来看，它不一定发生在表单的提交事件上，同样可以发生在ajax的异步请求上。有效地在web客户端采用一定机制去防止重复点击提交，将大大减轻服务器端压力。
　　那么，我们就不妨从表单提交及ajax的两种不同请求的处理过程中，来试试如何防止重复点击提交。

表单提交

<form action="login.do" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" onclick="this.disabled=true; this.value='登录中...'; this.form.submit();" value="登录" />
</form>

单击登录按钮进行提交以后，提交按钮就会变为灰色，并且给用户一个友好提示（登录中...），用户不能再单击第二次，直到重新加载页面或者跳转。可以发现，我们不需要给这个按钮恢复到可以再次登录的状态，仅仅源于页面重新进行了加载或者跳转。

ajax请求

(function($){
    $('input').click(function(){
        let btn=this;//修改this指向
        //表单验证
        ...

        //ajax异步提交
        $.ajax({
            url:'',
            data:'',
            dataType:'',
            beforeSend:function(){
                //点击之后让提交按钮失效，以实现防止按钮重复点击
                $(btn).attr('disabled',true);
                $(btn).text('登陆中');
            },
            complete:function(){
                //让按钮重新有效
                $(btn).removeAttr('disabled')
            }
            success:function(msg){
                if(msg==='ok'){
                    alert('登录成功')
                }else{
                    alert('登录失败')   
                }
            }
        }
    })
})(jQuery)

请求频度

let timer=null;
$(input).keyup(function(){
    var value=$(this).val();
    clearTimeout(timer);
    //如果键盘敲击的速度太快，小于100ms就不会向后台发请求，但是最后还是会发送一次请求
    timer=setTimeout(function(){
        //触发请求
        $.ajax({
            url:'',
            type:'',
            data:value,
            success:function(){}
        })
    },100)
})

总结

从宏观意义上讲，我们需要对每一个按钮去做“防止重复点击提交”，，面对这种情况，我们便可以采用一定策略来对其进行封装实现（如定义通用按钮类绑定事件）。
　从具体情况上来讲，我们并不需要对每一个按钮都去做”防止重复点击提交“，仅仅需要对某些可能具有复杂后台业务逻辑、或者文件上传、或者调用其他非本工程接口导致网络延迟等等情况需要去做”防止重复点击提交“。与此同时，我们必须要给予用户友好提示(如文本提示、渲染loading条、显示文件上传进度条等等)。两者需要一起来看、一起来做。当然，我们可以单独提取状态显示这个实现逻辑。代码如下：

(function($){
    var str='';
    var dom=$(str).prependTo('body');
    $(document).ajaxStart(function(){
        dom.stop(true,false).queue(function(
            $(this).show().dequeue();
        ))
    });
    $(document).ajaxStop(function(){
        dom.queue(function(){
            $(this).hide().dequeue();
        })
    })
})(jQuery)

转载于:https://www.cnblogs.com/Juphy/p/7019955.html