星空网 > 软件开发 > Java

多个ajax请求下等待条显示和隐藏的简单处理

  处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条。比较简单,源码如下(基于jQuery)

//基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列ajax请求全部结束才关闭等待条。 //任何ajax触发了ajaxSend事件会显示等待框,所有的ajax都执行完成(ajaxComplete事件)才会关闭等待框 $(function(){   //需要监听的ajax的url  var  listenUrls = [],   //等待条选择器   loadingSelector = '.loading-container',   //等待条显示需要添加的class   loadingClass = 'loading-ajax-active';     $(document).on('ajaxSend',function(){     //显示等待条    if(listenUrls.length <= 0){       $(loadingSelector).addClass(loadingClass);     }    //添加监听url    listenUrls.push(arguments[2].url);   }).on('ajaxComplete',function(){     var ajaxUrl = arguments[2].url;     for(var i = 0; i < listenUrls.length; i++){       //删除已经完毕的ajax请求监听      if(listenUrls[i] == ajaxUrl){         listenUrls.splice(i,1);       }     }     //没有需要监听的ajax才关闭等待条    if(listenUrls.length <= 0){       $(loadingSelector).removeClass(loadingClass);                         }   })         });

  需要根据情况改一下loadingSelector 和loadingClass即可。

 

  如果觉得本文不错,请点击右下方【推荐】!

  




原标题:多个ajax请求下等待条显示和隐藏的简单处理

关键词:ajax

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

有空运的快递:https://www.goluckyvip.com/tag/102779.html
营销方案:https://www.goluckyvip.com/tag/10278.html
什么快递空运:https://www.goluckyvip.com/tag/102780.html
空运的物流:https://www.goluckyvip.com/tag/102781.html
飞机托运几个包:https://www.goluckyvip.com/tag/102782.html
空运信息:https://www.goluckyvip.com/tag/102783.html
抖音电商副总裁将赴TikTok电商任职:https://www.goluckyvip.com/news/187213.html
中国跨境电商持续爆发,韩国本土企业慌了:https://www.kjdsnews.com/a/1836491.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流