防止重复点击提交

在做提交页面的时候，总有一个需求是防止重复提交 html代码如下

<form action="../mockup/json/test.json"  class="clearfix" onsubmit="return false">
                    <input type="hidden" name="service_id" id="" value="" />
                    <input type="hidden" name="product_id" id="" value="" />
                    <input type="hidden" name="instalment_amount" id="" value="" />
                    <input type="submit" name="" id="_pushBill" value="提交订单" />
                </form>

js代码如下

$('#_pushBill').on('click',function(){
            var timer = null;
            var self = $(this);
            //节流函数是用来控制点击频次
            clearTimeout(timer);
            timer = setTimeout(function(){
                $.ajax({
                type:"post",
                url:$('form').attr('action'),
                async:true,
                dataType: "json",
                data: $('form').serialize(),
                beforeSend: function () {
                 //让提交按钮失效，以实现防止按钮重复点击
                    self.prop('disabled', 'disabled');
                 //给用户提供友好状态提示
                    self.prop('value', '正在提交');
                 },
                success: function(res) {
                    showTip($('#_tip'), res.msg);
                    if (res.flag) {                       
                        setTimeout(function() {
                              location.href = res.url;
                        }, 2000);    
                    }
                    
                },
                error: function() {
                    showTip($('#_tip'), "请求服务异常，稍后再试");
                },
                complete: function () {
                 //让登陆按钮重新有效
                 setTimeout(function(){
                     self.removeAttr('disabled')
                 },3000);
             }
            })
                },100)
            
        })