防止重复点击提交

首先说说防止重复点击提交是什么意思。

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

　　不妨引深来看，它不必定发生在表单的提交事件上，一样能够发生在ajax的异步请求上。有效地在web客户端采用必定机制去防止重复点击提交，将大大减轻服务器端压力。

　　那么，咱们就不妨从表单提交及ajax的两种不一样请求的处理过程当中，来试试如何防止重复点击提交。

　　1、表单提交

　　就以登陆表单为例，代码以下：

<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的请求上，咱们又该如何处理呢？

　　2、ajax请求

(function ($) {
    
    $('.J-login').click(function () {
    
        var loginBtn = this;
        
        //1.先进行表单验证
        //......
        
        //2.让提交按钮失效，以实现防止按钮重复点击
        $(loginBtn).attr('disabled', 'disabled');
        
        //3.给用户提供友好状态提示
        $(loginBtn).text('登陆中...');
        
        //4.异步提交
        $.ajax({
            url: 'login.do',
            data: $(this).closest('form[name="loginForm"]').serialize(),
            type: 'post',
            success: function(msg){
                
                if (msg === 'ok') {
                    alert('登陆成功！');
                    
                    //TODO 其余操做...
                } else {
                    alert('登陆失败，请从新登陆！');
                    
                    //5.让登录按钮从新有效
                    $(loginBtn).removeAttr('disabled');
                }
    
            }
        });
        
    });
    
})(jQuery);

 能够发现，当登陆失败后，须要从新让登陆按钮具备登陆事件。

　　固然，咱们能够用一个更加优雅的方式来代替之。

(function ($) {
    
    $('.J-login').click(function () {
    
        var loginBtn = this;
        
        //1.先进行表单验证
        //......
        
        //2.异步提交
        $.ajax({
            url: 'login.do',
            data: $(this).closest('form[name="loginForm"]').serialize(),
            type: 'post',
            beforeSend: function () {
                //3.让提交按钮失效，以实现防止按钮重复点击
                $(loginBtn).attr('disabled', 'disabled');
                
                //4.给用户提供友好状态提示
                $(loginBtn).text('登陆中...');
            },
            complete: function () {
                //5.让登录按钮从新有效
                $(loginBtn).removeAttr('disabled');
            },
            success: function(msg){
                
                if (msg === 'ok') {
                    alert('登陆成功！');
                    
                    //TODO 其余操做...
                } else {
                    alert('登陆失败，请从新登陆！');
                }
    
            }
        });
        
    });
    
})(jQuery);

在这里，我仅仅举了一个最为简单的例子，还有不少其余的方式进行防止重复点击提交，如

　　1> 定义标志位：

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

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

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

　　3> 替换（移除）按钮DOM

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

　　固然，还有其余的方式进行实现，欢迎各位博友补充。

　　3、请求频度

　　相信你们碰到过这样的业务，咱们容许它重复点击（或者其余用户事件），可是不容许在必定的时间内超过次数XX次。这从用户友好体验及服务器承受压力选取了一个折中方案。

　　最合适不过的例子，莫过于关键字搜索匹配了。

　　相信你们定然首先想到节流函数了。

var timer = null;

$(input).keyup(function(){
    
    var value = $(this).val();
    
    clearTimeout(timer); 
      
    //若是键盘敲击速度太快，小于100毫秒的话就不会向后台发请求，可是最后总会进行一次请求的。
    timer = setTimeout(function() {
        //触发请求
        $.ajax({
            url: 'typeahead.do',
            type: 'get',
            data: value,
            success: function () {
                //显示匹配结果
                //......
            }
        });
    },100);
    
});

4、总结

　　从宏观意义上来说，咱们须要对每个按钮去作”防止重复点击提交“，面对这种状况，咱们即可以采用必定策略来对其进行封装实现（如定义通用按钮类绑定事件）。

　　从具体状况上来说，咱们并不须要对每个按钮都去作”防止重复点击提交“，仅仅须要对某些可能具备复杂后台业务逻辑、或者文件上传、或者调用其 他非本工程接口致使网络延迟等等状况须要去作”防止重复点击提交“。与此同时，咱们必需要给予用户友好提示(如文本提示、渲染loading条、显示文件 上传进度条等等)。二者须要一块儿来看、一块儿来作。固然，咱们能够单独提取状态显示这个实现逻辑。代码以下——

//全站ajax加载提示
(function ($) {

    var str = '<div class="ajax-status" style="display: none;">'
            +    '<div class="ajax"><img src="' + publicPath + 'img/loading.gif" width="20" height="20" />数据加载中...</div>'
            +'</div>';

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