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=" 10%; height: 30px; float: right; text-align: left;">
<a href="javascript:exportMerchantExcel();"  style="text-align: center;" class="audit" id="exportLink">导出</a>
  <div style="display: inline-block;visibility:hidden; 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) {
  if (data.status == "succeed") {
    $("#download").attr("href", data.path);
    $("#subBtn").trigger("click");
  } else {
  $.messager.alert('提示', data.msg, 'error');
}
},
error : function(err) {
  $.messager.alert('提示', err.msg, 'error');
},

complete:function(jqXHR, textStatus){
  stop_id_loadspot($("#loadingDiv"),$("#exportLink"));//停止加载中的提示
}

});

原文地址:https://www.cnblogs.com/zou-rong/p/10139261.html