經(jīng)常在寫代碼的時(shí)候碰到這樣的場(chǎng)景：頁(yè)面初始化時(shí)顯示loading頁(yè)，同時(shí)啟動(dòng)多個(gè)ajax并發(fā)請(qǐng)求獲取數(shù)據(jù)，當(dāng)每個(gè)ajax請(qǐng)求返回時(shí)結(jié)束loading。

舉個(gè)例子，一個(gè)下訂單的頁(yè)面，要查詢常用地址信息、商品信息、地市信息…而這些請(qǐng)求都是異步的，希望等到所有數(shù)據(jù)加載完成后再允許用戶操作。

要實(shí)現(xiàn)這個(gè)場(chǎng)景容易碰到的一個(gè)問(wèn)題就是多并發(fā)怎么控制？下面是一些解決方法和思路：

并行改為串行

如果業(yè)務(wù)邏輯本身是串行的，但是提供的請(qǐng)求方式又是異步的，可以考慮此方法。
但本場(chǎng)景顯然不是這種情況，這樣做大大降低了頁(yè)面性能，延長(zhǎng)了加載速度。

回調(diào)

只適合并發(fā)數(shù)少的情況，多層嵌套回調(diào)會(huì)讓代碼的可讀性大大降低

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

ajax改為同步

如在jquery中將async參數(shù)設(shè)置為false

$.ajax({
  url:"/jquery/test1.txt",
  async:false
});

設(shè)置結(jié)束標(biāo)識(shí)

簡(jiǎn)單一點(diǎn)的可以設(shè)置計(jì)數(shù)器，每完成一個(gè)異步函數(shù)加1，或者設(shè)置一個(gè)數(shù)組，每執(zhí)行完一個(gè)異步函數(shù)更新數(shù)組。

回調(diào)計(jì)數(shù)

var cnt = 0;
function async1(){
  //do sth...
  callback();
}
function async2(){
  //do sth...
  callback();
}
function callback(){
  cnt++;
  if(2==cnt) console.log('都已執(zhí)行完畢');
}

循環(huán)阻塞

var cnt = 0;
function async1(){
  //do sth...
  cnt++;
}
function async2(){
  //do sth...
  cnt++;
}
while(2>cnt){}

循環(huán)非阻塞

不建議過(guò)多使用，以免影響性能

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

第三方框架實(shí)現(xiàn)

jquery

目前我在項(xiàng)目中采用的方式

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 + '已完成');
});

以上內(nèi)容是小編給大家介紹的關(guān)于JavaScript多并發(fā)問(wèn)題如何處理的相關(guān)知識(shí)，希望對(duì)大家有所幫助。

您可能感興趣的文章: