jQuery實現載入中效果,防止重複提交
//匯出表格載入中的提示
var dian=0;//控制'●'的個數
var t=null;//停止時使用
function id_loadspot(loadspotSpan,loadingDiv,exportLink){
loadingDiv.css('visibility','visible');//顯示
exportLink.click(function(){//使連結失效
return false;
});
t=setTimeout(function() {
if (dian >= 3) {
loadspotSpan.text('');
dian = 0;
} else {
dian++;
loadspotSpan.text(loadspotSpan.text() + '●');
}
id_loadspot(loadspotSpan,loadingDiv,exportLink);//遞迴呼叫
}, 1000);
}
//停止載入中的提示
function stop_id_loadspot(loadingDiv,exportLink){
clearTimeout(t);//停止定時器
loadingDiv.css('visibility','hidden');//隱藏
exportLink.unbind("click");//使連結生效
}
//頁面
<div style="width: 10%; height: 30px; float: right; text-align: left;">
<a href="javascript:exportMerchantExcel();" style="text-align: center;" class="audit" id="exportLink
<div style="display: inline-block;visibility:hidden; width: 66px; text-align: left;" id="loadingDiv">
載入中<span id="id_loadspot"></span>
</div>
</div>
//使用
seachKey = $("#merchantName").val();
status =$('#upsfyx').combobox('getValue');
//載入中...
id_loadspot($('#id_loadspot'),$("#loadingDiv"),$("#exportLink"));
$.ajax({
url : '../system/cisweb/exportMerchantExcel',
dataType : "json",
type : "post",
data : {
seachKey : seachKey,
status:status,
},
success : function(data) {
stop_id_loadspot($("#loadingDiv"),$("#exportLink"));//停止載入中的提示
if (data.status == "succeed") {
$("#download").attr("href", data.path);
$("#subBtn").trigger("click");
} else {
$.messager.alert('提示', data.msg, 'error');
}
},
error : function(err) {
stop_id_loadspot($("#loadingDiv"),$("#exportLink"));//停止載入中的提示
$.messager.alert('提示', err.msg, 'error');
}
});