event loop是什么?
JS是單線程運(yùn)行的.
異步要基于回調(diào)來(lái)實(shí)現(xiàn).
event loop就是異步回調(diào)的實(shí)現(xiàn)原理
event loop執(zhí)行過(guò)程
Browser console 瀏覽器打印窗口
Call Stack 調(diào)用棧.
Web APIs 處理定時(shí)或異步的API.
Event Loop 事件輪詢(xún).
Callback Queue 回調(diào)函數(shù)隊(duì)列.
實(shí)例:
console.log('Hi');
setTimeout(function cb1() {
console.log('callback!')
}, 5000);
console.log('Bye')
event loop 過(guò)程:
同步代碼惫搏,一行一行放在 Call Stack 執(zhí)行.
遇到異步耕捞,先“記錄”下迁客,等待時(shí)機(jī)(定時(shí)鳞陨、網(wǎng)絡(luò)請(qǐng)求等).
時(shí)機(jī)到了,就移動(dòng)到 Callback Queue
如果 Call Stack 為空(即同步代碼執(zhí)行完)玷或,Event Loop 開(kāi)始工作.
輪詢(xún)查找 Callback Queue通铲,如有則移動(dòng)到 Call Stack 執(zhí)行.
然后繼續(xù)輪詢(xún)查找(永動(dòng)機(jī)一樣)
DOM事件與event loop的關(guān)系
實(shí)例:
console.log('Hi');
$('#btn1').click(function(e){
console.log('button clicked!')
})
setTimeout(function cb1() {
console.log('callback!')
}, 5000);
console.log('Bye')
DOM事件在event loop的執(zhí)行:
同步代碼毕莱,一行一行放在 Call Stack 執(zhí)行.
遇到點(diǎn)擊事件 ,將點(diǎn)擊事件的函數(shù)放在 Web APIs ,等待執(zhí)行.
所有的同步代碼執(zhí)行完颅夺,當(dāng)callStack空了 同步執(zhí)行結(jié)束朋截,
瀏覽器啟動(dòng) Event Loop 機(jī)制,
開(kāi)始輪詢(xún) Callback Queue
當(dāng)用戶(hù)觸發(fā)點(diǎn)擊事件吧黄,將Web APIs的 函數(shù)推到 Callback Queue.
Event Loop 機(jī)制在 Callback Queue 中找到了函數(shù)部服,
并將函數(shù) 推到了 Call Stack 中執(zhí)行函數(shù)內(nèi)容
異步(setTimeout、ajax)等回調(diào)拗慨,基于Event Loop實(shí)現(xiàn).
DOM事件也使用回調(diào)饲宿,基于Event Loop實(shí)現(xiàn)