淺談js的異步執(zhí)行
1.Javascript語言的執(zhí)行環(huán)境是”單線程”(single thread):
優(yōu)點(diǎn):實(shí)現(xiàn)起來比較簡單,執(zhí)行環(huán)境相對(duì)單純;
缺點(diǎn):只要有一個(gè)任務(wù)耗時(shí)很長,后面的任務(wù)都必須排隊(duì)等著,會(huì)拖延整個(gè)程序的執(zhí)行。常見的瀏覽器無響應(yīng)(假死),往往就是因?yàn)槟骋欢蜫avascript代碼長時(shí)間運(yùn)行(比如死循環(huán)),導(dǎo)致整個(gè)頁面卡在這個(gè)地方,其他任務(wù)無法執(zhí)行。
為了解決這個(gè)問題,Javascript語言將任務(wù)的執(zhí)行模式分成兩種:同步(Synchronous)和異步(Asynchronous)。
2.”異步模式”編程的幾種方法:
(1)回調(diào)函數(shù):優(yōu)點(diǎ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ù),讓它來控制異步任務(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ī)淼臏\談js的異步執(zhí)行全部內(nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
微信小程序?qū)崿F(xiàn)登陸注冊(cè)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登陸注冊(cè)滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05javascript設(shè)置和獲取cookie的方法實(shí)例詳解
這篇文章主要介紹了javascript設(shè)置和獲取cookie的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析總結(jié)了JavaScript操作cookie簡單實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與讀取的相關(guān)技巧,需要的朋友可以參考下2016-01-01JavaScript通如何過RGraph實(shí)現(xiàn)動(dòng)態(tài)儀表盤
這篇文章主要介紹了JavaScript通如何過RGraph實(shí)現(xiàn)動(dòng)態(tài)儀表盤,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10window.location不跳轉(zhuǎn)的問題解決方法
window.location的跳轉(zhuǎn)失效的情況有沒有遇到過啊,這主要是冒泡傳遞影響了,下面有個(gè)不錯(cuò)的解決方法,大家可以參考下2014-04-04一文詳解JavaScript中的URL和URLSearchParams
URL,稱為統(tǒng)一資源定位器,指互聯(lián)網(wǎng)上能找到資源定位的字符串,而URLSearchParams對(duì)象是專門用于處理url網(wǎng)址信息中的查詢字符串,本文就來帶大家深入了解一下二者的使用2023-05-05Javascript將數(shù)值轉(zhuǎn)換為金額格式(分隔千分位和自動(dòng)增加小數(shù)點(diǎn))
這篇文章主要介紹Javascript將數(shù)值轉(zhuǎn)換為金額格式的方法,通俗易懂,需要的朋友可以參考下。2016-06-06JS時(shí)間控制實(shí)現(xiàn)動(dòng)態(tài)效果的實(shí)例講解
下面小編就為大家?guī)硪黄狫S時(shí)間控制實(shí)現(xiàn)動(dòng)態(tài)效果的實(shí)例講解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07基于JS實(shí)現(xiàn)仿百度百家主頁的輪播圖效果
本文給大家分享基于html和js實(shí)現(xiàn)的仿百度百家主頁的輪播圖效果,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-03-03