多个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);                                         
        } 
    })                 
});

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

标签：

原文地址：http://www.cnblogs.com/libaoli/p/5141334.html