JavaScript多并發(fā)問題如何處理
經(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è)問題就是多并發(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ā)問題如何處理的相關(guān)知識(shí)，希望對(duì)大家有所幫助。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ES6小技巧之代替lodash的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
最近使用到了jstree，感覺是一款靈活的、可多項(xiàng)定制的tree插件。下面通過(guò)本文給大家詳細(xì)介紹下jstree的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2016-12-12
20分鐘輕松創(chuàng)建自己的Bootstrap站點(diǎn)
這篇文章主要教大家如何在短短的20分鐘內(nèi)輕松創(chuàng)建自己的Bootstrap站點(diǎn)，學(xué)會(huì)使用twitter bootstrap建立一個(gè)站點(diǎn)，從而鞏固Bootstrap一系列基礎(chǔ)知識(shí)，感興趣的小伙伴們可以參考一下2016-05-05
解決使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò)：error：Bootstrap dropdown require
這篇文章主要介紹了使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò)：error：Bootstrap dropdown require Popper.js ,小編把問題描述和解決方案分享給大家，需要的朋友可以參考下2018-08-08
js動(dòng)態(tài)添加刪除,后臺(tái)取數(shù)據(jù)(示例代碼)
這篇文章主要是對(duì)js動(dòng)態(tài)添加刪除,后臺(tái)取數(shù)據(jù)(示例代碼)進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法,結(jié)合實(shí)例形式分析了json對(duì)象的遍歷、添加實(shí)現(xiàn)合并的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
在本篇文章中我們給大家分享了js刪除數(shù)組中的指定元素的詳實(shí)示例方法，有需要的朋友們學(xué)習(xí)下2018-10-10
修改file按鈕的默認(rèn)樣式實(shí)現(xiàn)代碼
file按鈕作為上傳文件使用，不過(guò)默認(rèn)的樣式確實(shí)讓人不敢恭維啊，如何才可以修改為漂亮一點(diǎn)的呢？接下來(lái)與大家分享下具體的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈2013-04-04
微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能（函數(shù)防抖）
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能（函數(shù)防抖）,需要的朋友可以參考下2019-09-09
js控制div及網(wǎng)頁(yè)相關(guān)屬性的代碼
js控制div及相關(guān)屬性，對(duì)于需要控制頁(yè)面內(nèi)的元素的朋友可以參考下。2009-12-12