ajax 延迟显示加载中提示

  近期做项目时用到了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)
                }
            });
        }
    }
}());

  欢迎各位大神指教,转载请注明出处~

posted @ 2012-06-16 12:32  杨元超  阅读(1650)  评论(0编辑  收藏  举报