近期做項目時用到了jquery的ajax，我希望實現“加載時提示用戶”的功能，于是先習慣性的度娘谷哥了下，發現按照網上朋友所說的做，每次加載都會提示，不符合我的需求。于是我改進了下，現在如果deferTime內加載成功，則不提示用戶，否則就顯示加載中圖片。

ajaxHelper

var ajaxHelper = (function () {function _judgeAndShowLoadingImg(timeCount, timer, loading, whole, imgPath) {var imgSrc = "<img src='" + imgPath + "' border='0'/>"; //加載中圖片if (timeCount !== 0) { //如果已經加載成功或加載失敗，則清除重復執行并返回 clearInterval(timer);return;}else {$(whole).hide();$(loading).html(imgSrc).show();clearInterval(timer);}}return {/*** 設定ajax全局事件，顯示加載中、加載失敗示例：<div id="loading" style="border:1px solid red;display:none;"></div><div id="whole" ></div>* @param loading 顯示信息的層的ID* @param whole 正文所在層的ID* @param deferTime 延遲時間（秒）。如果延遲時間內加載成功，則不顯示加載中圖片，否則顯示* @param imgPath 加載中圖片的路徑。如"/Content/Image/Shared/Loading/ico_loading3.gif"* @returns*/showWholeLoading: function (loading, whole, deferTime, imgPath) {var _timeCount = 0,_timer = null;$(loading).ajaxStart(function () {_timeCount = 0; //歸位_timer = setInterval(function () {_judgeAndShowLoadingImg(_timeCount, _timer, loading, whole, imgPath);}, deferTime * 1000);}).ajaxSuccess(function () {_timeCount++; //計數加1，用來判斷是否加載成功$(this).hide();$(whole).show();}).ajaxError(function (e, xhr, settings, exception) {_timeCount += 2; //計數加2，用來判斷是否加載失敗$(this).html("加載失敗：" + exception).show();$(whole).hide();});},/*** 設置單次ajax的事件，顯示加載中、加載失敗示例：<div id="loading" style="border:1px solid red;display:none;"></div><div id="whole" ></div>* @param loading 顯示信息的層的ID* @param whole 正文所在層的ID* @param deferTime 延遲時間（秒）。如果延遲時間內加載成功，則不顯示加載中圖片，否則顯示* @param imgPath 加載中圖片的路徑。如"/Content/Image/Shared/Loading/ico_loading3.gif"* @param setting ajax的參數。包括url、data、type、dataType、success* @returns*/showSingleLoading: function (loading, whole, deferTime, imgPath, setting) {var _timeCount = 0,_timer = null,self = this;$.ajax({url: setting.url,data: setting.data,type: setting.type || "GET",dataType: setting.dataType,beforeSend: function () {_timeCount = 0; //歸位_timer = setInterval(function () {_judgeAndShowLoadingImg(_timeCount, _timer, loading, whole, imgPath);}, deferTime * 1000);},error: function (jqXHR, textStatus, exception) {_timeCount += 2; //計數加2，用來判斷是否加載失敗$(loading).html("加載失敗：" + exception).show();$(whole).hide();},success: function (data) {_timeCount++; //計數加1，用來判斷是否加載成功 $(loading).hide();$(whole).show();setting.success(data)}});}} }());

　　歡迎各位大神指教，轉載請注明出處~

轉載于:https://www.cnblogs.com/chaogex/archive/2012/06/16/2551782.html

總結

以上是生活随笔為你收集整理的ajax 延迟显示加载中提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。