zoukankan      html  css  js  c++  java
  • JS中如何处理多个ajax并发请求?

    js中的多并发处理。

    通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据

    这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?

    (1)并行改串行

    如果业务逻辑和用户体验允许的情况下,可以改为串行,处理起来最简单

    function async1(){
    //do sth...
    async2();
    }
    function async2(){
    //do sth...
    }
    async1();

    (2)回调计数

    function async1(){
    //do sth...
    callback();
    }
    function async2(){
    //do sth...
    callback();
    }
    function callback(){
    cnt++;
    if(2==cnt) console.log('都已执行完毕');
    }

    (3)循环非阻塞

    function async1(){
    //do sth...
    cnt++;
    }
    function async2(){
    //do sth...
    cnt++;
    }
    var interval = setInterval(function(){
    if(2===cnt){
    console.log('已执行完成');
    clearInterval(interval)
    }
    };

    这个方法采用了定时间隔触发器,占用CPU比较多,建议酌情使用

    (4)jquery

    使用jquery的延时处理方法,每个ajax请求完成后,把对应的Deferred置为完成状态,然后用jquery判断全部完成后再进行后续处理

    var d1 = $.Deferred();
    var d2 = $.Deferred();

    function async1(){
    d1.resolve( "Fish" );
    }

    function async2(){
    d2.resolve( "Pizza" );
    }

    $.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 + v2 + '已完成');
    });

    另:ajax时异步请求不会出现堵塞情况。

    $.when($.ajax, $ajax).done(function() { balabala })

    转载:

    经常在写代码的时候碰到这样的场景:页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading。 
    举个例子,一个下订单的页面,要查询常用地址信息、商品信息、地市信息…而这些请求都是异步的,希望等到所有数据加载完成后再允许用户操作。 
    要实现这个场景容易碰到的一个问题就是多并发怎么控制?下面是一些解决方法和思路: 

    并行改为串行 
    如果业务逻辑本身是串行的,但是提供的请求方式又是异步的,可以考虑此方法。 
    但本场景显然不是这种情况,这样做大大降低了页面性能,延长了加载速度。 

    回调 
    只适合并发数少的情况,多层嵌套回调会让代码的可读性大大降低 

    代码 
    1. function async1(){  
    2.     //do sth...  
    3. }  
    4. function async2(){  
    5.     //do sth...  
    6.     async1();  
    7. }  
    8. async2();  


    ajax改为同步 

    如在jquery中将async参数设置为false。 

    代码 
    1. $.ajax({  
    2.     url:"/jquery/test1.txt",  
    3.     async:false  
    4. });  


    设置结束标识 
    简单一点的可以设置计数器,每完成一个异步函数加1,或者设置一个数组,每执行完一个异步函数更新数组。 

    回调计数 

    Js代码 
    1. var cnt = 0;  
    2. function async1(){  
    3.     //do sth...  
    4.     callback();  
    5. }  
    6. function async2(){  
    7.     //do sth...  
    8.     callback();  
    9. }  
    10. function callback(){  
    11.     cnt++;  
    12.     if(2==cnt) console.log('都已执行完毕');  
    13. }  


    循环阻塞 

    代码 
    1. var cnt = 0;  
    2. function async1(){  
    3.     //do sth...  
    4.     cnt++;  
    5. }  
    6. function async2(){  
    7.     //do sth...  
    8.     cnt++;  
    9. }  
    10. while(2>cnt){}  


    循环非阻塞 

    不建议过多使用,以免影响性能 

    Js代码 
    1. var cnt = 0;  
    2.   
    3. function async1(){  
    4.     //do sth...  
    5.     cnt++;  
    6. }  
    7. function async2(){  
    8.     //do sth...  
    9.     cnt++;  
    10. }  
    11. var interval = setInterval(function(){  
    12.     if(2===cnt){  
    13.         console.log('已执行完成');  
    14.         clearInterval(interval)  
    15.     }  
    16. }, 0);  


    第三方框架实现 
    jquery 

    目前我在项目中采用的方式 

    代码 
      1. var d1 = $.Deferred();  
      2. var d2 = $.Deferred();  
      3.   
      4. function async1(){  
      5.     d1.resolve( "Fish" );  
      6. }  
      7.   
      8. function async2(){  
      9.     d2.resolve( "Pizza" );  
      10. }  
      11.   
      12. $.when( d1, d2 ).done(function ( v1, v2 ) {  
      13.     console.log( v1 + v2 + '已完成');  
      14. });  
  • 相关阅读:
    Ubuntu学习
    Django之 Views组件
    Django之 admin组件
    Django之 Models组件
    Django之 url组件
    递归
    python 之 编码
    Python 之 Restful API设计规范
    Django之实现登录随机验证码
    git &github 快速入门
  • 原文地址:https://www.cnblogs.com/wangqiao170/p/7766383.html
Copyright © 2011-2022 走看看