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

前言

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

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

概念

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

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

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

舉個栗子

下面一段代碼，我們可以先了解一些一些關于事件循環(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');

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

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

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

TIP

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

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

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

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

再次舉個栗子

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

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當中的promise，打印2是優(yōu)先于6執(zhí)行的，由此我們可以知道，new Promise在執(zhí)行過程中，在未執(zhí)行resolve或者rejected前，所執(zhí)行的代碼均為同步隊列中的代碼。
再看4，5，3的執(zhí)行順序，在執(zhí)行微任務promise執(zhí)行回調resolve之后，對應的then立即執(zhí)行
在打印結果中，定時器5優(yōu)先執(zhí)行于—->屬于微任務promise中的宏任務定時器3，定時器5這個宏任務是在promise微任務這個隊列之后就加進去，在promise執(zhí)行完成then回調之后，promise中的宏任務才加入到隊列當中，因此在定時器5之后執(zhí)行