JavaScript-EventLoop-事件迴圈

来源:https://www.cnblogs.com/fengwenya/archive/2020/01/11/12180049.html
-Advertisement-
Play Games

2020-01-11 EventLoop-事件迴圈 一、學習事件迴圈之前,先學習幾個英語片語 EventLoop 事件迴圈 Event Queue 事件隊列 Event Table 事件表macro-task 巨集任務micro-task 微任務 二、再來一道事件機制的題 console.log(1) ...


2020-01-11

EventLoop-事件迴圈

一、學習事件迴圈之前,先學習幾個英語片語

EventLoop 事件迴圈
Event Queue 事件隊列
Event Table 事件表
macro-task 巨集任務
micro-task 微任務

二、再來一道事件機制的題

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
  
  Promise.resolve().then(() => {
    console.log(6)
  }).then(() => {
    console.log(7)
    
    setTimeout(() => {
      console.log(8)
    }, 0);
  });
})

setTimeout(() => {
  console.log(9);
})

console.log(10);

// 正確結果:1、4、10、5、6、7、2、3、9、8

        哈哈哈,看到上邊的題是不是被嚇到了,小甜的老師當時發給我的時候,我也驚呆了,同步非同步真的太難為我了。

      當時把自己寫的結果給老師發過去,然後又運行了一下,發現自己從第三個就開始錯了。ok,下麵就從事件迴圈機制開始學習,將這個題弄懂吧。

三、js事件迴圈、同步非同步

      首先,js任務執行的是單線程的,幹啥都得按順序來,後邊的任務得等排隊等著。但是任務分為同步和非同步。

      當一個任務塊代碼執行時,

  • 遇到同步任務,就會進入主線程,
  • 遇到非同步任務會進入Event Table中註冊函數,之後將函數移入到 Event Queue。
  • 主線程內任務執行完畢,會去Event Queue 讀取非同步函數,按照順序執行非同步函數。

      待這個代碼塊的同步任務執行完,Event Table會將的非同步任務,也是按照順序執行的。

 

 

                      圖源來自https://juejin.im/post/59e85eebf265da430d571f89 大佬的

        不過還是有問題的,Event Queue 里,需要先執行微任務

四、js事件迴圈、巨集任務微任務

    js事件還可以分為巨集任務微任務

  • macro-task(巨集任務):包括整體代碼script,setTimeout,setInterval
  • micro-task(微任務):Promise,process.nextTick

    當一個巨集任務進入主線程

  • 判斷這個任務是同步非同步,同步執行
  • 非同步巨集任務,放在 Event Queue , 非同步微任務,放在 Event Queue
  • 當主線程任務執行完畢,去Event Queue
  • 進入Event Queue,判斷是微任務還是巨集任務,先執行微任務,再執行巨集任務

 

       圖源來自大佬 https://juejin.im/post/59e85eebf265da430d571f89

 

五、ook,學習完事件迴圈,接下來咱們來解決開頭的問題吧。

// macro1,同步執行,列印1
console.log(1);    

// macro2,非同步巨集任務放到 Event Queue ,我們標記為callback1(macro)
setTimeout(() => {
  // 同步任務
  console.log(2);
  // 非同步微任務,我們標記為callback4(micro)
  Promise.resolve().then(() => {
    console.log(3)
  });
});

// macro3 同步巨集任務
new Promise((resolve, reject) => {
  // 同步執行,列印4
  console.log(4)
  resolve(5)
  // micro1,非同步微任務放到 Event Queue,我們標記為callback2(micro)
}).then((data) => {
  // 同步,列印5
  console.log(data);  
  // 非同步微任務,放到 Event Queue,我們標記為callback5(micro)
  Promise.resolve().then(() => {
    console.log(6)
  // 非同步微任務,放到 Event Queue,我們標記為callback6(micro)
  }).then(() => {
    console.log(7)
  // 非同步巨集任務,放到 Event Queue,我們標記為callback7(macro)
    setTimeout(() => {
      console.log(8)
    }, 0);
  });
})

// macro4,非同步巨集任務放到 Event Queue ,我們標記為callback3(macro)
setTimeout(() => {
  console.log(9);
})

// macro5,同步任務列印10
console.log(10);


// 分析:
// *** 進入主線程,主線程的巨集任務塊有5個,先執行同步任務

// 1. 【執行同步任務】
//     (1).列印1,4,10


// 2. Event Queue 的函數有 :callback1(macro)callback2(micro)callback3(macro)

// 3. 【先執行微任務 callback2(micro)
//     (1).執行同步任務,列印 5 ,列印console.log(data),結果是5,data是 resolve的結果
//     (2).callback5(micro)
//     (3).callback6(micro)
//     (4).callback7(macro)

// *** 此時已經列印出:1,4,10,5
// *** Event Queue 的函數依次是:callback1(macro)callback3(macro)callback5(micro)callback6(micro)callback7(macro)
// *** 微任務有兩個,依次執行微任務

// 4.【微任務】
//     (1).callback5(micro)列印6
//     (2).callback6(micro)列印7

// *** 此時已經列印出:1,4,10,5,6,7
// *** Event Queue 的函數依次是:callback1(macro)callback3(macro)callback7(macro)
// *** 接下來依次執行

// 5. 【巨集任務callback1(macro)
//     (1).執行同步,列印2
//     (2).callback4(micro)

// *** 此時已經列印出:1,4,10,5,6,7,2
// *** Event Queue 的函數依次是:callback3(macro)callback7(macro)callback4(micro)
// *** 接下來先執行微任務

// 6. 【微任務callback4(micro)
//     (1).列印3

// *** 此時已經列印出:1,4,10,5,6,7,2,3
// *** Event Queue 的函數依次是:callback3(macro)callback7(macro
// *** 巨集任務剩下兩個,接下來依次執行

// 7. 【巨集任務callback3(macro)callback7(macro)
//     (1).列印9
//     (1).列印8

// *** 此時已經列印出:1,4,10,5,6,7,2,3,9,8
// *** 任務執行完畢,所有數字均已列印出來

 

ok ,本次學習到這裡就結束啦!下麵再來一道練習題吧!

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

 

如果沒學會,可以去看看大佬的講解 https://juejin.im/post/59e85eebf265da430d571f89


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 場景 Android中四種補間動畫。 透明度漸變動畫 旋轉動畫 縮放動畫 平移動畫 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 透明度漸變動畫 首先在佈局文件中添加一個Im ...
  • 場景 Android中的逐幀動畫,就是由連續的一張張照片組成的動畫。 效果 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 首先準備一組不同表情的照片,放在res/drawab ...
  • 如果你在2019年8月之前將Flutter添加到現有iOS項目,本文值得你一看。 在2019年7月30日,合併合併請求flutter / flutter#36793之前Flutter 1.8.4-pre.21, 將Flutter添加到現有的iOS應用程式需要更改Podfile, 併在現有Xcode項 ...
  • 1.安裝一款安卓模擬器 ​ 本例使用網易MuMu模擬器,因為目前網路上這類模擬器只有mumu的安卓版本是最新的,為6.0,安卓自帶的Virtual Device雖然有很新的版本,但如果pc配置不是很高的話還是比較卡的,不同的模擬器需要連接的埠不同,後面會用到關於端號,具體請百度。 2.設置MuMu ...
  • 插件下載地址及文檔說明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css"> <script src="../js/cropper.js"></script> <script src="https://cdn.stat ...
  • 在Node.js開發中,當遇到 buffer,stream,和二進位數據處理時,你是否像我一樣,總是感到困惑?這種感覺是否會讓你認為不瞭解它們,以為它們不適合你,認為而這些是Node.js作者們的事情? 確實,這些東西可能非常令人生畏,尤其是當你在缺乏電腦底層基礎知識,進行相關的開發。 可悲的是, ...
  • 一個日曆的控制項,基於vue的,可以日曆區間選擇,可用於酒店日曆區間篩選,動手能力強,可以修改成小程式版本的,先上效果圖 裡面的顏色樣式都是可以修改的 選擇範圍效果 話不多說,直接上乾貨,代碼可以直接複製訪問 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> ...
  • 前言 本文寫於2020年1月11日,僅提供最基本的引用方法,參考fontawesome5英文官方文檔和vue-fontawesome英文官方文檔。 正文 在vue項目中使用fontawesome5圖標,不需要引入fontawesome組件,直接引入vue-fontawesome和相關組件就可以了。 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...