昨天去面了滴滴，一口氣面了三面，考了 promise 和事件循環(huán)。之前的猿輔導(dǎo)也考察了這些，幾乎所有的大廠中廠都一定會(huì)考原生 js 的事件循環(huán)隊(duì)列。

今天，我把昨天考察的原題拿出來(lái)分析一下。

setTimeout

瀏覽器是多線程的，js 是單線程的（因?yàn)槎嗑€程操作同一個(gè) dom 會(huì)有數(shù)據(jù)不一致的問(wèn)題），但 js 又支持異步，因此異步就是在 js 主線程有空的時(shí)候才去執(zhí)行某個(gè)存放在隊(duì)列里面的任務(wù)，任務(wù)又分為微任務(wù)和宏任務(wù)，只要微任務(wù)隊(duì)列里面有任務(wù)，那么微任務(wù)就會(huì)優(yōu)先執(zhí)行，否則依次執(zhí)行宏任務(wù)隊(duì)列里的任務(wù)。

那么根據(jù)上面這些理論

有兩個(gè) setTimeout，屬于宏任務(wù)，直接把里面的內(nèi)容放入宏隊(duì)列，注意，宏隊(duì)列目前是：

任務(wù)1

顯然，代碼要先輸出主線程中的 6，然后再執(zhí)行宏任務(wù)隊(duì)列里面的任務(wù)。

拿出宏任務(wù)1，輸出1，看到里面有 promise，把 then 后面的內(nèi)容放進(jìn)微任務(wù)里面。

此時(shí)，微任務(wù)隊(duì)列為：

任務(wù)1：console.log(2)

微任務(wù)有任務(wù)，優(yōu)先執(zhí)行，輸出 2，又把 5 放入微任務(wù)。

任務(wù)1：console.log(5)

拿出來(lái)，再次輸出5。此時(shí)微任務(wù)隊(duì)列里面沒(méi)東西了，再拿出宏任務(wù)里面的任務(wù)2。

輸出 3，把 then 后面的放入微任務(wù)，拿出來(lái)，輸出 4。

也就是結(jié)果為 6 1 2 5 3 4

如果我們稍微改動(dòng)一下題目，

setTimeout

結(jié)果為：

總結(jié)

以上是生活随笔為你收集整理的原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。