淺談js的異步執(zhí)行
1.Javascript語言的執(zhí)行環(huán)境是”單線程”(single thread):
優(yōu)點:實現(xiàn)起來比較簡單,執(zhí)行環(huán)境相對單純;
缺點:只要有一個任務耗時很長,后面的任務都必須排隊等著,會拖延整個程序的執(zhí)行。常見的瀏覽器無響應(假死),往往就是因為某一段Javascript代碼長時間運行(比如死循環(huán)),導致整個頁面卡在這個地方,其他任務無法執(zhí)行。
為了解決這個問題,Javascript語言將任務的執(zhí)行模式分成兩種:同步(Synchronous)和異步(Asynchronous)。
2.”異步模式”編程的幾種方法:
(1)回調(diào)函數(shù):優(yōu)點是簡單、容易理解和部署,缺點是不利于代碼的閱讀和維護,各個部分之間高度耦合(Coupling),使得程序結(jié)構(gòu)混亂、流程難以追蹤(尤其是回調(diào)函數(shù)嵌套的情況),而且每個任務只能指定一個回調(diào)函數(shù)。
(2)采用事件驅(qū)動模式(事件監(jiān)聽):優(yōu)點是比較容易理解,可以綁定多個事件,每個事件可以指定多個回調(diào)函數(shù),而且可以”去耦合“(Decoupling),有利于實現(xiàn)模塊化。缺點是整個程序都要變成事件驅(qū)動型,運行流程會變得很不清晰。
(3)觀察者模式(發(fā)布\訂閱模式):這種方法的性質(zhì)與”事件監(jiān)聽”類似,但是明顯優(yōu)于后者。因為我們可以通過查看”消息中心”,了解存在多少信號、每個信號有多少訂閱者,從而監(jiān)控程序的運行。
3.異步操作的流程控制。
(1)串行執(zhí)行:編寫一個流程控制函數(shù),讓它來控制異步任務,一個任務完成以后,再執(zhí)行另一個。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
function series(item) {
if(item) {
async( item, function(result) {
results.push(result);
return series(items.shift());
});
} else {
return final(results);
}
}
series(items.shift());
函數(shù)series就是串行函數(shù),它會依次執(zhí)行異步任務,所有任務都完成后,才會執(zhí)行final函數(shù)。items數(shù)組保存每一個異步任務的參數(shù),results數(shù)組保存每一個異步任務的運行結(jié)果。
(2)并行執(zhí)行:所有異步任務同時執(zhí)行,等到全部完成以后,才執(zhí)行final函數(shù)。
//forEach方法會同時發(fā)起6個異步任務,等到它們?nèi)客瓿梢院?,才會?zhí)行final函數(shù)。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
items.forEach(function(item) {
async(item, function(result){
results.push(result);
if(results.length == items.length) {
final(results);
}
})
});
并行執(zhí)行的好處是效率較高,比起串行執(zhí)行一次只能執(zhí)行一個任務,較為節(jié)約時間。但是問題在于如果并行的任務較多,很容易耗盡系統(tǒng)資源,拖慢運行速度。因此有了第三種流程控制方式。
(3)并行與串行的結(jié)合:設置一個門檻,每次最多只能并行執(zhí)行n個異步任務。這樣就避免了過分占用系統(tǒng)資源。
//變量running記錄當前正在運行的任務數(shù),只要低于門檻值,就再啟動一個新的任務
//如果等于0,就表示所有任務都執(zhí)行完了,這時就執(zhí)行final函數(shù)
//最多只能同時運行兩個異步任務。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
var running = 0;
var limit = 2;
function launcher() {
while(running < limit && items.length > 0) {
var item = items.shift();
async(item, function(result) {
results.push(result);
running++;
if(items.length > 0) {
launcher();
}
});
running--;
if(running == 0) {
final();
}
}
}
以上就是小編為大家?guī)淼臏\談js的異步執(zhí)行全部內(nèi)容了,希望大家多多支持腳本之家~
相關文章
JavaScript通如何過RGraph實現(xiàn)動態(tài)儀表盤
這篇文章主要介紹了JavaScript通如何過RGraph實現(xiàn)動態(tài)儀表盤,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
window.location不跳轉(zhuǎn)的問題解決方法
window.location的跳轉(zhuǎn)失效的情況有沒有遇到過啊,這主要是冒泡傳遞影響了,下面有個不錯的解決方法,大家可以參考下2014-04-04
一文詳解JavaScript中的URL和URLSearchParams
URL,稱為統(tǒng)一資源定位器,指互聯(lián)網(wǎng)上能找到資源定位的字符串,而URLSearchParams對象是專門用于處理url網(wǎng)址信息中的查詢字符串,本文就來帶大家深入了解一下二者的使用2023-05-05
Javascript將數(shù)值轉(zhuǎn)換為金額格式(分隔千分位和自動增加小數(shù)點)
這篇文章主要介紹Javascript將數(shù)值轉(zhuǎn)換為金額格式的方法,通俗易懂,需要的朋友可以參考下。2016-06-06

