【16】winter重學前端 - JavaScript執行（一）：Promise里的代碼為什么比se

Vicky 發布于2019-08-23 17:02 / 2277人閱讀

摘要：即使耗時一秒的執行完畢，再的，仍然先于執行了，這很好地解釋了微任務優先的原理。把整個代碼分割成了個宏觀任務，這里不論是秒還是秒，都是一樣的。

js實現異步的幾種形式

回調函數

事件監聽 - 事件驅動模式

發布/訂閱 - 觀察者模式

Promises對象

js異步歷史

一個 JavaScript 引擎會常駐于內存中，它等待著我們把JavaScript 代碼或者函數傳遞給它執行

在 ES3 和更早的版本中，JavaScript 本身還沒有異步執行代碼的能力，引擎就把代碼直接順次執行了，這個任務也就是宿主發起的任務。

在 ES5 之后，JavaScript 引入了 Promise，這樣，不需要瀏覽器的安排，JavaScript 引擎本身也可以發起任務了。

宏觀和微觀任務

宏觀任務：宿主發起的任務，每次的一段js代碼執行過程，其實都是一個宏觀任務(可大致理解為：宏觀任務的隊列就相當于事件循環）- 宿主級別

微觀任務：JavaScript 引擎發起的任務 - JS 引擎級別

關系：每個宏觀任務中維護一個微觀任務隊列 - 宏觀任務中，JavaScript 的 Promise 還會產生異步代碼，JavaScript 必須保證這些異步代碼在一個宏觀任務中完成

例子

Promise 永遠在隊列尾部添加微觀任務

setTimeout 等宿主 API，則會添加宏觀任務

執行順序：

微觀任務：在所屬的宏觀任務隊列所有同步任務執行完成之后執行

宏觀任務：宏任務的觸發規則和調用次序

eg:執行一個耗時 1 秒的 Promise。
即使耗時一秒的 c1 執行完畢，再 enque 的 c2，仍然先于 d 執行了，這很好地解釋了微任務優先的原理。

    setTimeout(()=>console.log("d"), 0)
  var r1 = new Promise(function(resolve, reject){
      resolve()
  });
  r.then(() => { 
      var begin = Date.now();
      // 強制了 1 秒的執行耗時，這樣，我們可以確保任務 c2 是在setTimeout d后加入任務隊列
      while(Date.now() - begin < 1000);
      console.log("c1") 
      new Promise(function(resolve, reject){
          resolve()
      }).then(() => console.log("c2"))
  });

事件循環

定義：JavaScript 引擎等待宿主環境分配宏觀任務，在操作系統中，通常等待的行為都是一個事件循環 - 就是反復“等待 - 執行”

功能：判斷循環是否結束、宏觀任務隊列等邏輯

如何分析異步執行的順序：

首先我們分析有多少個宏任務；

在每個宏任務中，分析有多少個微任務；

根據調用次序，確定宏任務中的微任務執行次序；

根據宏任務的觸發規則和調用次序，確定宏任務的執行次序；

確定整個順序。

eg:
setTimeout 把整個代碼分割成了 2 個宏觀任務，這里不論是 5 秒還是 0 秒，都是一樣的。
第一個宏觀任務中，包含了先后同步執行的 console.log(“a”); 和 console.log("b")
setTimeout 后，第二個宏觀任務執行調用了resolve，然后 then 中的代碼異步得到執行，所以調用了 console.log(“c”)，最終輸出的順序才是a,b,c

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            console.log("b");
            setTimeout(resolve,duration);
        })
    }
    console.log("a");
    sleep(5000).then(()=>console.log("c"));

GPU云服務器云服務器代碼只執行一次前端比java哪個難 java做后臺比前端 javascript里的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103709.html

重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

zorpan 2019-08-26 13:47 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

pinecone 2019-08-02 16:18 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

xiongzenghui 2019-08-30 10:54 評論0 收藏0
重學前端學習筆記（九）--JavaScript中的對象分類

摘要：固有對象由標準規定，隨著運行時創建而自動創建的對象實例。普通對象由語法構造器或者關鍵字定義類創建的對象，它能夠被原型繼承。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：ka...

ShowerSun 2019-08-02 16:16 評論0 收藏0