連續點擊按鈕前端防止重複提交

當觸發點擊事件後,在此事件沒完成之前,不能再觸發點擊事件,在事件完成後才能再次點擊
目前想到兩種解決方案
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 表示結束操作
        });;
    }
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章