jqury 解决多个Ajax并发执行

                                       解决多个Ajax并发执行。

更多前端信息可以关注博客:http://www.colbrus.com

     通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据,这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?

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

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

         这个方法既可以解决多个接口执行出错,也可以解决多次执行同一个接口的时候出现并发的问题,如下:

var a=0;
function async1(a){
    //do sth...
}
a++;  //执行次数
success(){   //获取接口成功后
     if(a<执行次数){
          async1(a)
     }
}

二、回调计数

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

三、循环非阻塞

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

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

四、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 })

注: 如果上述有错误的,希望可以积极帮忙指出错误,谢了!

你可能感兴趣的:(jqury 解决多个Ajax并发执行)