快捷導(dǎo)航

簡單聊聊JavaScript的事件循環(huán)機(jī)制

更新時間：2022年03月18日 10:01:51 作者：程序猿布?xì)W

前端開發(fā)的童鞋應(yīng)該都知道,JavaScript是一門單線程的腳本語言,這就意味著JavaScript 代碼在執(zhí)行的時候,只有一個主線程來執(zhí)行所有的任務(wù),同一個時間只能做同一件事情,這篇文章主要給大家介紹了關(guān)于JavaScript事件循環(huán)機(jī)制的相關(guān)資料,需要的朋友可以參考下

前言

JavaScript是一門單線程的弱類型語言，但是我們在開發(fā)中，經(jīng)常會遇到一些需要異步或者等待的處理操作。

類似ajax，亦或者ES6中新增的promise操作用于處理一些回調(diào)函數(shù)等。

概念

在JavaScript代碼執(zhí)行過程中，可以分為同步隊(duì)列和異步隊(duì)列。

同步任務(wù)類似我們常說的立即執(zhí)行函數(shù)，不需要等待可以直接進(jìn)行，可以直接進(jìn)入到主線程中去執(zhí)行，類似正常的函數(shù)調(diào)用等。

異步隊(duì)列則是異步執(zhí)行函數(shù)，類似ajax請求，我們在發(fā)起的過程中，會進(jìn)入到一個異步隊(duì)列，加載到任務(wù)當(dāng)中時，需要進(jìn)行等待，之后才能進(jìn)行返回值的處理。

舉個栗子

下面一段代碼，我們可以先了解一些一些關(guān)于事件循環(huán)機(jī)制的一些基本的原理

console.log('1');
setTimeout(function() {
  console.log('4');
}, 0);
Promise.resolve().then(function() {
  console.log('2');
}).then(function() {
  console.log('3');
});
console.log('5');

我們將代碼打印到控制臺當(dāng)中，輸出結(jié)果是：1，5，2，3，4

我們知道，在JavaScript中，類似定時器，以及ES6新增的promise是異步函數(shù)，回到我們上面所說的隊(duì)列的概念當(dāng)中，不難得出，1和5為同步執(zhí)行隊(duì)列

在執(zhí)行完同步隊(duì)列中的代碼之后，再執(zhí)行異步隊(duì)列中的代碼。

TIP

在解析異步隊(duì)列的promise和定時器中，我們發(fā)現(xiàn)，定時器setTimeout是后執(zhí)行于promise，這里我們引入JavaScript規(guī)范中的宏任務(wù)（Macro Task）和微任務(wù)（Micro Task）的概念

在JavaScript中，宏任務(wù)包含了：script( 整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 環(huán)境)

微任務(wù)：Promise、MutaionObserver、process.nextTick(Node.js 環(huán)境)

再回到上面的定時器和promise的問題，這時候我們知道，JavaScript中，當(dāng)有異步隊(duì)列的時候，優(yōu)先執(zhí)行微任務(wù)，再執(zhí)行宏任務(wù)

再次舉個栗子

假如在異步隊(duì)列當(dāng)中存在異步隊(duì)列時，我們需要怎么處理

console.log(1);
setTimeout(function() {
  console.log(5);
}, 10);
new Promise(resolve => {
    console.log(2);
    resolve();
    setTimeout(() => console.log(3), 10);
}).then(function() {
    console.log(4);
})
console.log(6);

將代碼執(zhí)行到控制臺中，得出的打印順序是：1,2,6,4,5,3

不同于例子1當(dāng)中的promise，打印2是優(yōu)先于6執(zhí)行的，由此我們可以知道，new Promise在執(zhí)行過程中，在未執(zhí)行resolve或者rejected前，所執(zhí)行的代碼均為同步隊(duì)列中的代碼。
再看4，5，3的執(zhí)行順序，在執(zhí)行微任務(wù)promise執(zhí)行回調(diào)resolve之后，對應(yīng)的then立即執(zhí)行
在打印結(jié)果中，定時器5優(yōu)先執(zhí)行于—->屬于微任務(wù)promise中的宏任務(wù)定時器3，定時器5這個宏任務(wù)是在promise微任務(wù)這個隊(duì)列之后就加進(jìn)去，在promise執(zhí)行完成then回調(diào)之后，promise中的宏任務(wù)才加入到隊(duì)列當(dāng)中，因此在定時器5之后執(zhí)行