zoukankan      html  css  js  c++  java
  • ajax 延迟显示加载中提示 Wonder

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

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

  • 相关阅读:
    重写System.IO.MemoryStream类, 实现LumiSoft.Net.POP3.Client单封邮件的下载进度显示
    获取页面来源URL ,源页面URL,Request.UrlReferrer为空的问题
    JavaScript BOM 随笔谈
    Android 端 博客园闪存——alpha版
    除余取模的算术变化特点,模的变化特点
    EF Code First 更新部分字段时 未更新字段的验证问题
    Android 端闪存 应用——alpha 2.0 版
    简化C#版Junit
    利用 Vs2012 编译MSOpenTech/Redis ——以服务方式运行Redis
    Android requires compiler compliance level 5.0. Please fix project properties.错误
  • 原文地址:https://www.cnblogs.com/chaogex/p/2551782.html
Copyright © 2011-2022 走看看