您的位置:首页 > 其它

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

2016-01-19 10:17 344 查看
处理为遇到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);
}
})
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: