你的位置:首页 > Java教程

[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即可。

 

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