连续点击按钮前端防止重复提交

当触发点击事件后,在此事件没完成之前,不能再触发点击事件,在事件完成后才能再次点击 目前想到两种解决方案 1.点击后，把按钮或链接的disabled设为true，让它变成不可用状态；请求成功之后在变成可点击状态 div按钮

<div id="but" onclick="savePay()">提交</div>
.disable {
          
   
	pointer-events: none;
}
function savePay() {
          
   
	// 禁用点击事件
	$("#but").addClass("disable");

	// 提交业务

	// 10秒后启用点击事件
	setTimeout(function(){
          
   
		$("#but").removeClass("disable");
	},10000);
}

button按钮

<input type="button" id="but" onclick="savePay()" value="提交"/>
function savePay() {
          
   
	// 禁用点击事件
	$("#but").attr("disabled",true);

	// 提交业务

	// 10秒后启用点击事件
	setTimeout(function(){
          
   
		$("#but").removeAttr("disabled");
	},10000);
}

2.通过开闭原则在程序中判断和设定

var doing=false;//定义一个全局变量
$("button.do").on("click",function(){
          
   
    if(doing){
          
   
        alert("上一个操作未完成");
    }else{
          
   
        doing=true;//变量设为true，表示开始操作
        //do something 如ajax
        $.ajax({
          
   url:"地址"}).done(function(){
          
   
            doing=false; //变量改回false 表示结束操作
        });;
    }
});