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

//基于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);
}
})
});