多个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即可。

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