JQUERY 防止快速双击重复提交

最近项目发现用户注册了两次，相差时间ms，肯定是前端页面重复提交了，于是解决如下：

一、one() 方法

定义和用法 
one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。 
当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

语法

$(selector).one(event,data,function);
 

• 1

使用示例

  

   

    

     

    
    

     

      $('.register_btn').unbind('click').one('click', function() {
     
    
   

    

     

    
    

     

      		            userRegister();
     
    
   

    

     

    
    

     

      		            $(this).unbind('click');  
     
    
   

    

     

    
    

     

      		        });
     
    
  
 

• 1
• 2
• 3

这种方式有个弊端，只允许点一次，但实际要求是注册点一次若异常还是能点的。

二、unbind()方法

在按钮点击的时候移除绑定事件。 
使用示例

  

   

    

     

    
    

     

      $('.register_btn').unbind('click').bind('click', function() {
     
    
   

    

     

    
    

     

      		            userRegister();
     
    
   

    

     

    
    

     

      		            $(this).unbind('click');  
     
    
   

    

     

    
    

     

      		        });
     
    
  
ajax请求后需要重新绑定事件
  

   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      success: function(json) {
     
    
   

    

     

    
    

     
				
     
    
   

    

     

    
    

     

      		    	var responseText = json.responseText;
     
    
   

    

     

    
    

     

      		    	var text = jQuery.parseJSON(responseText);
     
    
   

    

     

    
    

     

      		    	var body = text['body'];
     
    
   

    

     

    
    

     

      		    	var respCode = body['respCode'];
     
    
   

    

     

    
    

     

      		    	var respDesc = body['respDesc'];
     
    
   

    

     

    
    

     

      		    	if("0" == respCode){//成功
     
    
   

    

     

    
    

     

      		    		alert("注册成功！");
     
    
   

    

     

    
    

     

      		    		toCasLogin();
     
    
   

    

     

    
    

     

      		    	}else if("1" == respCode){
     
    
   

    

     

    
    

     

      		    		alert("系统错误，请重试！");
     
    
   

    

     

    
    

     

      		    	}else if("2" == respCode){
     
    
   

    

     

    
    

     

      		    		alert(respDesc);
     
    
   

    

     

    
    

     

      		    	}
     
    
   

    

     

    
    

     

      		    	changeVerifyCode();
     
    
   

    

     

    
    

     

      		    	
     
    
   

    

     

    
    

     

      		    	// 重新绑定事件
     
    
   

    

     

    
    

     

      		    	$('.register_btn').unbind('click').bind('click', function() {
     
    
   

    

     

    
    

     

      		            userRegister();
     
    
   

    

     

    
    

     

      		            $(this).unbind('click');  
     
    
   

    

     

    
    

     

      		        });
     
    
   

    

     

    
    

     

      		    },
     
    
   

    

     

    
    

     

      		    error: function(json) {			
     
    
   

    

     

    
    

     

      		    	throw new Error("Get Service Data Error!");
     
    
   

    

     

    
    

     

      		    }
     
    
  

 

文章来源: blog.csdn.net，作者：隔壁老瓦，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/wxb880114/article/details/81035626