淺談js的異步執(zhí)行
1.Javascript語(yǔ)言的執(zhí)行環(huán)境是”單線程”(single thread):
優(yōu)點(diǎn):實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單,執(zhí)行環(huán)境相對(duì)單純;
缺點(diǎn):只要有一個(gè)任務(wù)耗時(shí)很長(zhǎng),后面的任務(wù)都必須排隊(duì)等著,會(huì)拖延整個(gè)程序的執(zhí)行。常見的瀏覽器無(wú)響應(yīng)(假死),往往就是因?yàn)槟骋欢蜫avascript代碼長(zhǎng)時(shí)間運(yùn)行(比如死循環(huán)),導(dǎo)致整個(gè)頁(yè)面卡在這個(gè)地方,其他任務(wù)無(wú)法執(zhí)行。
為了解決這個(gè)問題,Javascript語(yǔ)言將任務(wù)的執(zhí)行模式分成兩種:同步(Synchronous)和異步(Asynchronous)。
2.”異步模式”編程的幾種方法:
(1)回調(diào)函數(shù):優(yōu)點(diǎn)是簡(jiǎn)單、容易理解和部署,缺點(diǎn)是不利于代碼的閱讀和維護(hù),各個(gè)部分之間高度耦合(Coupling),使得程序結(jié)構(gòu)混亂、流程難以追蹤(尤其是回調(diào)函數(shù)嵌套的情況),而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。
(2)采用事件驅(qū)動(dòng)模式(事件監(jiān)聽):優(yōu)點(diǎn)是比較容易理解,可以綁定多個(gè)事件,每個(gè)事件可以指定多個(gè)回調(diào)函數(shù),而且可以”去耦合“(Decoupling),有利于實(shí)現(xiàn)模塊化。缺點(diǎn)是整個(gè)程序都要變成事件驅(qū)動(dòng)型,運(yùn)行流程會(huì)變得很不清晰。
(3)觀察者模式(發(fā)布\訂閱模式):這種方法的性質(zhì)與”事件監(jiān)聽”類似,但是明顯優(yōu)于后者。因?yàn)槲覀兛梢酝ㄟ^查看”消息中心”,了解存在多少信號(hào)、每個(gè)信號(hào)有多少訂閱者,從而監(jiān)控程序的運(yùn)行。
3.異步操作的流程控制。
(1)串行執(zhí)行:編寫一個(gè)流程控制函數(shù),讓它來(lái)控制異步任務(wù),一個(gè)任務(wù)完成以后,再執(zhí)行另一個(gè)。
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ù),它會(huì)依次執(zhí)行異步任務(wù),所有任務(wù)都完成后,才會(huì)執(zhí)行final函數(shù)。items數(shù)組保存每一個(gè)異步任務(wù)的參數(shù),results數(shù)組保存每一個(gè)異步任務(wù)的運(yùn)行結(jié)果。
(2)并行執(zhí)行:所有異步任務(wù)同時(shí)執(zhí)行,等到全部完成以后,才執(zhí)行final函數(shù)。
//forEach方法會(huì)同時(shí)發(fā)起6個(gè)異步任務(wù),等到它們?nèi)客瓿梢院?,才?huì)執(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í)行一個(gè)任務(wù),較為節(jié)約時(shí)間。但是問題在于如果并行的任務(wù)較多,很容易耗盡系統(tǒng)資源,拖慢運(yùn)行速度。因此有了第三種流程控制方式。
(3)并行與串行的結(jié)合:設(shè)置一個(gè)門檻,每次最多只能并行執(zhí)行n個(gè)異步任務(wù)。這樣就避免了過分占用系統(tǒng)資源。
//變量running記錄當(dāng)前正在運(yùn)行的任務(wù)數(shù),只要低于門檻值,就再啟動(dòng)一個(gè)新的任務(wù)
//如果等于0,就表示所有任務(wù)都執(zhí)行完了,這時(shí)就執(zhí)行final函數(shù)
//最多只能同時(shí)運(yùn)行兩個(gè)異步任務(wù)。
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ī)?lái)的淺談js的異步執(zhí)行全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
JavaScript獲取系統(tǒng)時(shí)間的方法詳解
網(wǎng)頁(yè)通過JavaScript獲取系統(tǒng)日期、時(shí)間的操作是比較常規(guī)的操作,這篇文章將為大家介紹一些常用的方法,希望對(duì)大家有一定的幫助2024-11-11
JavaScript 函數(shù)的定義-調(diào)用、注意事項(xiàng)
這篇文章主要介紹了JavaScript 函數(shù)的定義-調(diào)用、注意事項(xiàng),需要的朋友可以參考下2017-04-04
JavaScript中的this陷阱的最全收集并整理(沒有之一)
這篇文章主要介紹了JavaScript中的this陷阱的最全收集,需要的朋友可以參考下2017-02-02
JS 實(shí)現(xiàn)獲取驗(yàn)證碼 倒計(jì)時(shí)功能
這篇文章主要介紹了JS 實(shí)現(xiàn)獲取驗(yàn)證碼 倒計(jì)時(shí)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
基于JavaScript實(shí)現(xiàn)手機(jī)短信按鈕倒計(jì)時(shí)(超簡(jiǎn)單)
在淘寶等購(gòu)物網(wǎng)站,我們都會(huì)看到一個(gè)發(fā)送短信倒計(jì)時(shí)的按鈕,究竟是如何實(shí)現(xiàn)的呢?下面小編通過本篇文章給大家分享一段代碼關(guān)于js實(shí)現(xiàn)手機(jī)短信按鈕倒計(jì)時(shí),需要的朋友參考下2015-12-12
JavaScript實(shí)現(xiàn)圖像壓縮的方法
使用 JavaScript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上,然后使用 toDataURL() 方法將圖像轉(zhuǎn)換為 Data URL 形式,這篇文章主要介紹了JavaScript 圖像壓縮的相關(guān)資料,需要的朋友可以參考下2023-01-01

