zoukankan      html  css  js  c++  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即可。

      

  • 相关阅读:
    Hyperledger Fabric的容灾备份及恢复方法
    Sentinel使用
    Fabric1.4 架构和原理
    centos开放指定端口
    Python使用ProtoBuffer
    C++动态创建对象
    Shell笔记
    Go语言基础(二)
    Go语言基础(一)
    git常用命令
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/5082864.html
Copyright © 2011-2022 走看看