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) } }); } } }());
欢迎各位大神指教,转载请注明出处~
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?