JavaScript事件循環機制

• 2021 年 4 月 26 日
• 筆記
• javascript

javaScript是單線程的語言：

　　眾所周知，javaScript是一門單線程語言；何為單線程？我的理解是：同一時間只能做同一件事；單線程在程序執行時，所走的程序路徑按照連續順序排下來，前面的必須處理好，後面的才會執行。

白話解釋：

 　進程：是cpu資源分配的最小單位；（能擁有獨立資源和獨立運行的最小單位）

　 線程：是cpu資源調度的最小單位；（線程是建立在進程基礎上一次程序最小的執行單位，一個進程中可以有多個線程）

 

 　　解析圖文：　

　　　　同步和異步任務分別進入不同的執行”場所”，同步的進入主線程，異步的進入Event Table（任務隊列）並註冊函數。

　　　　當指定的事情完成時，Event Table（任務隊列）會將這個函數移入Event Queue（事件隊列）。

　　　　主線程內的任務執行完畢為空，會去Event Queue（事件隊列）讀取對應的函數，進入主線程執行。

　　　　上述過程會不斷重複循環，也就是常說的Event Loop(事件循環)。

 　　舉個例子：

console.log('script start'); 

setTimeout(function() {
  console.log('setTimeout');  
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');  
}).then(function() {
  console.log('promise2');  
});

console.log('script end');  

　　輸出結果應為：

　　　　script start
　　　　script end
　　　　promise1
　　　　promise2
　　　　setTimeout

　　執行過程解析：

　　首先循環瀏覽器會執行第一步的同步任務，當執行到setTimeout的時候發現是異步的宏任務然後放入到任務隊列中，接着往下執行Promise.then，發現Promise.then也是異步任務且是微任務，繼續放入到隊列中接着往下走執行”sciprt end ” ；執行完”script end “之後發現主進程的同步任務都執行完了，然後開始執行異步任務，異步任務任務又分為宏任務和微任務，我們前面說過微任務會優先於宏任務執行；所以我們繼續執行” promise1 “，然後往下走發現還有個.then的微任務沒有執行，接着往下執行” promise2 “，至此所有的微任務執行完畢我們再去執行宏任務” setTimeout “，所以最終的執行結果應該為：script start > script end > promise1 > promise2 > setTimeout

　　什麼？學會了？上面demo太簡單？那我們再看一下複雜一丟丟的例子來檢驗一下我們的學習成果

console.log('1');   
 setTimeout(() => {
    console.log('2')  
 }, 1000);
 new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('3');  
    }, 0);
    console.log('4');  
    resolve();
    console.log('5');  
 }).then(() => {
    console.log('6');  
 });
 console.log('7');  

　　這個例子是在上面例子的基礎上加以改造進行了嵌套