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

第簡單聊聊JavaScript的事件循環(huán)機制目錄前言概念舉個栗子TIP再次舉個栗子總結(jié)

前言

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

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

概念

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

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

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

舉個栗子

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

console.log('1');

setTimeout(function(){

console.log('4');

},0);

Promise.resolve().then(function(){

console.log('2');

}).then(function(){

console.log('3');

console.log('5');

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

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

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

TIP

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

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

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

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

再次舉個栗子

假如在異步隊列當中存在異步隊列時，我們需要怎么處理

console.log(1);

setTimeout(function(){

console.log(5);

},10);

newPromise(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當中的promise，打印2是優(yōu)先于6執(zhí)行的，由此我們可以知道，newPromise在執(zhí)行過程中，在未執(zhí)行resolve或者rejected前，所執(zhí)行的代碼均為同步隊列中的代碼。再看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ù)這個隊列之后就加進去，在promise執(zhí)行完成then回調(diào)之后，promise中的宏任務(wù)才加入到隊列當中，因此在定時器5之后執(zhí)行

總結(jié)

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

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

在執(zhí)行過程中，同步代碼優(yōu)先