先解釋一下主任務(wù)、微任務(wù)和宏任務(wù)的概念。

因為JS是單線程，代碼中所有同步任務(wù)（后面統(tǒng)一稱為主任務(wù)）都在主線程上執(zhí)行，形成一個執(zhí)行棧，棧是先進(jìn)后出的。代碼跑起來以后會先執(zhí)行棧中的主任務(wù)直到所有任務(wù)執(zhí)行完畢；當(dāng)遇到異步任務(wù)時，它會被單獨放到異步執(zhí)行隊列中去，這里的異步任務(wù)又分為宏任務(wù)和微任務(wù)，有一個宏任務(wù)隊列和一個微任務(wù)隊列，隊列是先進(jìn)先出的。

在異步任務(wù)中，微任務(wù)優(yōu)于宏任務(wù)執(zhí)行，當(dāng)主任務(wù)執(zhí)行完畢后先去查看微任務(wù)隊列中是否有東西，有則主線程讀取微任務(wù)隊列中的所有內(nèi)容按順序執(zhí)行完畢（這個過程中遇到了異步任務(wù)也是要放到兩個異步隊列的末尾的，后面主線程中內(nèi)容執(zhí)行完畢后又會去讀取，所以可能產(chǎn)生事件循環(huán)Event Loop，這是前端必須了解的一個概念）。當(dāng)主任務(wù)棧和微任務(wù)隊列中沒有內(nèi)容了，主線程才會讀取宏任務(wù)隊列中的所有內(nèi)容按順序執(zhí)行完畢。

所以，執(zhí)行順序：主任務(wù)?> 微任務(wù)?> 宏任務(wù)?

---

而setTimeout屬于異步任務(wù)中的宏任務(wù)。當(dāng)代碼按順序讀到setTimeout函數(shù)時，會執(zhí)行它開始計時，計時完成后把setTimeout函數(shù)里面的內(nèi)容放入宏任務(wù)隊列中等待后續(xù)被主線程讀取。

如果setTimeout的時間設(shè)置非常大，當(dāng)主任務(wù)和微任務(wù)中的內(nèi)容都執(zhí)行完畢時間都還沒結(jié)束，那么會等到時間到了再進(jìn)入宏任務(wù)隊列并被主線程讀取。

如果setTimeout的時間設(shè)置比較小，在主任務(wù)和微任務(wù)中的內(nèi)容執(zhí)行完畢之前就結(jié)束了，那么它在時間到了以后就會被加入宏任務(wù)隊列，并且當(dāng)主任務(wù)和微任務(wù)內(nèi)容讀取完畢以后會立刻調(diào)用宏任務(wù)中加入的setTimeout函數(shù)里面的內(nèi)容。只有同步任務(wù)執(zhí)行完了才會去執(zhí)行異步任務(wù)，哪怕異步任務(wù)已經(jīng)到時間了。

在同一環(huán)境中有多個setTimeout函數(shù)時（都在主任務(wù)或者都在微任務(wù)中），setTimeout函數(shù)中內(nèi)容被放入宏任務(wù)隊列的順序與代碼書寫的順序無關(guān)，而是與計時器時間設(shè)定的長短有關(guān)，時間越長則越后加入隊列，也越后被讀取執(zhí)行。

總結(jié)

以上是生活随笔為你收集整理的前端每日一解 - setTimeout的执行顺序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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