以前對js的事件循環(huán)和事件隊(duì)列不是很明白檐春，只知道js是單線程唠椭，什么異步啊什么的，沒有深入的去了解過侧啼，所以導(dǎo)致有些時(shí)候執(zhí)行的順序不是朝著自己想當(dāng)然的執(zhí)行順序牛柒！弄的就很頭疼！所以本篇文字將記錄一下什么是事件循環(huán)和事件隊(duì)列痊乾，忘記的時(shí)候可以再回來看看多鞏固皮壁！
javascript有一個(gè)執(zhí)行棧和任務(wù)隊(duì)列，主線程將會按順序執(zhí)行代碼哪审，遇到函數(shù)的時(shí)候蛾魄，將函數(shù)入棧，執(zhí)行完函數(shù)之后再將函數(shù)彈出棧湿滓，直到所有的代碼都執(zhí)行完畢為止滴须。
在遇到有異步操作的時(shí)候如：（setTimeout，ajax）等這些叽奥，瀏覽器自己會去執(zhí)行這些異步的操作扔水，在瀏覽器執(zhí)行完這些異步的操作之后，瀏覽器會把事件定義的回調(diào)函數(shù)推入主線程的任務(wù)隊(duì)列中朝氓，在主線程執(zhí)行棧清空之后魔市，會去執(zhí)行任務(wù)隊(duì)列中的回調(diào)函數(shù)，直到任務(wù)隊(duì)列清空為止赵哲，然后再回到主線程執(zhí)行棧繼續(xù)執(zhí)行待德，從而進(jìn)入一個(gè)無限循環(huán)這個(gè)就叫事件循環(huán)
分的更細(xì)一點(diǎn)
宏任務(wù)&微任務(wù)
一個(gè)瀏覽器環(huán)境只能有一個(gè)事件循環(huán)，但是一個(gè)事件循環(huán)可以有多個(gè)任務(wù)隊(duì)列枫夺。
宏任務(wù)：瀏覽器的渲染将宪，setTimeout，ajax，I/O等
微任務(wù)：process.nextTick, Promise等
當(dāng)遇到setTimeout较坛，I/O等事件的時(shí)候印蔗，會創(chuàng)建一個(gè)宏任務(wù)，當(dāng)遇到promise的時(shí)候會創(chuàng)建一個(gè)微任務(wù)丑勤，兩個(gè)分別掛起的任務(wù)隊(duì)列喻鳄。當(dāng)主線程的執(zhí)行棧閑置的時(shí)候，開始處理微任務(wù)确封，把所有的微任務(wù)處理完后除呵，再去取宏任務(wù)隊(duì)列的第一個(gè)，把宏任務(wù)隊(duì)列的回調(diào)函數(shù)拖到執(zhí)行棧中執(zhí)行爪喘，返回主線程執(zhí)行棧颜曾。
每一次事件循環(huán)，只會處理一個(gè)宏任務(wù)秉剑，等到微任務(wù)一次性完畢之后泛豪，再清理宏任務(wù)。在處理這些微任務(wù)的同時(shí)侦鹏，還可能會加入新的微任務(wù)诡曙，也會一一執(zhí)行完畢，直到微任務(wù)隊(duì)列清空為止略水。
下面看幾個(gè)例子：
上述代碼打印順序: 開始 -> 開始1 -> 開始2 -> 結(jié)束 -> 1 -> 2 -> 3
解析：
主線程執(zhí)行棧：console.log('開始') 開始1价卤，開始2，結(jié)束渊涝。執(zhí)行setTimeout的時(shí)候?qū)⒒卣{(diào)函數(shù)添加到任務(wù)棧里面慎璧，當(dāng)主線程執(zhí)行完后，setTimeout的定時(shí)會執(zhí)行然后再根據(jù)定時(shí)的回調(diào)再清除任務(wù)棧里面的回調(diào)函數(shù)跨释。setTimeout的第二個(gè)參數(shù)時(shí)間胸私，不一定是等到多少秒后再去執(zhí)行的，否則寫0的話就變成0秒了鳖谈，這個(gè)是等主線程執(zhí)行棧為空的時(shí)候再才去執(zhí)行岁疼。
我是第二題：
打印順序：開始 -> fn1 -> ajaxfn -> 結(jié)束 -> ajaxpromise結(jié)束 -> setTimeout
解析：
流程：開始-> fn1()入棧 執(zhí)行 推出棧-> setTimeout()執(zhí)行，回調(diào)函數(shù)入宏任務(wù)隊(duì)列-> ajaxfn() 入棧執(zhí)行 打印ajaxfn 返回promise缆娃，此時(shí)就有一個(gè)微任務(wù)promise添加到任務(wù)隊(duì)列里面了-> 結(jié)束 -> 此時(shí)主線程執(zhí)行棧閑置捷绒，然后開始執(zhí)行任務(wù)隊(duì)列，微任務(wù)promise開始執(zhí)行龄恋，微任務(wù)隊(duì)列清空后疙驾，然后再執(zhí)行宏任務(wù)凶伙，取出第一個(gè)并打印setTimeout郭毕。
巧記：
我們只需記住當(dāng)前執(zhí)行棧執(zhí)行完畢時(shí)會立刻先處理所有微任務(wù)隊(duì)列中的事件，然后再去宏任務(wù)隊(duì)列中取出一個(gè)事件函荣。同一次事件循環(huán)中显押，微任務(wù)永遠(yuǎn)在宏任務(wù)之前執(zhí)行扳肛。
setTimeout(function () {
console.log(1);
});
new Promise(function(resolve,reject){
console.log(2)
resolve(3)
}).then(function(val){
console.log(val);
})
打印順序： 2 -> 3 -> 1
先執(zhí)行完微任務(wù)promise，然后再執(zhí)行宏任務(wù)setTimout的回調(diào)函數(shù)
我是分隔符
文末思考題:
先別著急看答案
打印的順序是什么呢乘碑？挖息？
只要記住先把微任務(wù)先執(zhí)行完就清楚啦
答案:
- 開始
- fn1
- ajaxfn
- ajaxfn
- 結(jié)束
- ajaxpromise結(jié)束
- ajaxpromise結(jié)束2
- promise3
- setTimeout
- setTimeout2
ok,事件循環(huán)和事件隊(duì)列你是否搞清楚了呢？反正我目前來說是有點(diǎn)清晰了兽肤，還需要在工作當(dāng)中多去實(shí)踐和認(rèn)證套腹，如果文章中有不對的地方和描述不是很清晰的地方希望看到這篇文章的大佬幫忙指正，可以留言評論區(qū)喲~先謝各位有緣刷到此篇文章的大佬了资铡，感謝你們能看到這篇文章的結(jié)尾處电禀。
