Javascript實(shí)現(xiàn)異步編程的過程
相信不少人對Javascript單線程表示懷疑:為何單線程可以實(shí)現(xiàn)異步操作呢?其實(shí)Javascript確實(shí)是單線程的(我們不妨把這個(gè)線程稱作主線程),但它實(shí)現(xiàn)異步操作的方式確實(shí)借助了瀏覽器的其他線程的幫助。那其他線程是怎么幫助Javascript主線程來實(shí)現(xiàn)異步的呢?答案就是任務(wù)隊(duì)列(task queue)和事件循環(huán)(event loop)。
任務(wù)隊(duì)列
首先,作為單線程語言,在Javascript中定義的任務(wù)都會在主線程中執(zhí)行。但是并不是每個(gè)任務(wù)都會立刻執(zhí)行,而這種不立刻執(zhí)行的任務(wù)我們稱作異步任務(wù)。相反,那些立刻執(zhí)行的任務(wù)我們把它們稱作同步任務(wù)。而這些異步任務(wù)都會交給瀏覽器的其他線程去執(zhí)行,但是主線程需要了解這些異步任務(wù)執(zhí)行的狀態(tài),才方便進(jìn)行下一步操作。
打個(gè)比方,主線程準(zhǔn)備做飯,所以下達(dá)一個(gè)異步任務(wù)去買菜,異步任務(wù)買完菜之后得告訴主線程:“我買完菜啦”,這個(gè)時(shí)候主線程才好開始做飯。
而我們知道因?yàn)镴avascript是單線程,所以上述的“下一步操作”沒法直接定義在主函數(shù)里(不然就被當(dāng)做同步任務(wù)直接執(zhí)行了),那這些應(yīng)該定義在哪里呢?答案就是異步任務(wù)的回調(diào)函數(shù)中。在Javascript異步機(jī)制中,任務(wù)隊(duì)列就是用來維護(hù)異步任務(wù)回調(diào)函數(shù)的隊(duì)列。這樣一個(gè)隊(duì)列用來存放這些回調(diào)函數(shù),它們會等到主線程執(zhí)行完所有的同步函數(shù)之后按照先進(jìn)先出的方式挨個(gè)執(zhí)行。那么執(zhí)行完任務(wù)隊(duì)列之后呢?Javascript主線程就執(zhí)行完畢了嗎?當(dāng)然不是,不然網(wǎng)頁加載完畢之后,誰來處理后續(xù)與用戶的交互事件(比如點(diǎn)擊事件)呢?
事件循環(huán)

我們通過上圖來更加形象的了解Javascript的異步機(jī)制。
執(zhí)行同步任務(wù) -> 檢查任務(wù)隊(duì)列中是否有任務(wù) -> [有如果則執(zhí)行] -> 檢查任務(wù)隊(duì)列中是否有任務(wù) -> [有如果則執(zhí)行] -> ......
可見主線程在執(zhí)行完同步任務(wù)之后,會無限循環(huán)地去檢查任務(wù)隊(duì)列中是否有新的“任務(wù)”,如果有則執(zhí)行。而這些任務(wù)包括我們在異步任務(wù)中定義的回調(diào)函數(shù),也包括用戶交互事件的回調(diào)函數(shù)。通過事件循環(huán),Javascript不僅很好的處理了異步任務(wù),也很好的完成了與用戶交互事件的處理。因?yàn)樵谕瓿僧惒饺蝿?wù)的回調(diào)函數(shù)之后,任務(wù)隊(duì)列中的任務(wù)都是由事件所產(chǎn)生的,因此我們也把上述的循環(huán)過程叫做事件循環(huán)。
異步機(jī)制實(shí)踐
console.log('定時(shí)器去買菜吧')
setTimeout(function(){
console.log('菜買完了,主線程去做菜吧')
}, 0)
console.log('你先去買菜,我先看個(gè)世界杯')
在瀏覽器中執(zhí)行上述代碼,興許能更好地理解Javascript的異步機(jī)制。
總結(jié)
總而言之,Javascript單線程的背后有瀏覽器的其他線程為其完成異步服務(wù),這些異步任務(wù)為了和主線程通信,通過將回調(diào)函數(shù)推入到任務(wù)隊(duì)列等待執(zhí)行。主線程所做的就是執(zhí)行完同步任務(wù)后,通過事件循環(huán),不斷地檢查并執(zhí)行任務(wù)隊(duì)列中回調(diào)函數(shù)。
相關(guān)文章
解決 firefox 不支持 document.all的方法
解決 firefox 不支持 document.all的方法...2007-03-03
深入解析JavaScript中的數(shù)字對象與字符串對象
這篇文章主要介紹了JavaScript中的數(shù)字對象與字符串對象,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-10-10
分析Node.js connect ECONNREFUSED錯(cuò)誤
最近在準(zhǔn)備Angularjs +node.js demo的時(shí)候在我的mac開發(fā)中 遇見此錯(cuò)誤2013-04-04
使用Grunt.js管理你項(xiàng)目的應(yīng)用說明
以前我們可能使用NodeJS自己寫一個(gè)build程序,但是現(xiàn)在Grunt.js能夠提供我們需要的一切2013-04-04

