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

Vicky 發(fā)布于2019-08-23 17:02 / 2285人閱讀

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

js實現(xiàn)異步的幾種形式

回調(diào)函數(shù)

事件監(jiān)聽 - 事件驅(qū)動模式

發(fā)布/訂閱 - 觀察者模式

Promises對象

js異步歷史

一個 JavaScript 引擎會常駐于內(nèi)存中，它等待著我們把JavaScript 代碼或者函數(shù)傳遞給它執(zhí)行

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

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

宏觀和微觀任務

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

微觀任務：JavaScript 引擎發(fā)起的任務 - JS 引擎級別

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

例子

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

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

執(zhí)行順序：

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

宏觀任務：宏任務的觸發(fā)規(guī)則和調(diào)用次序

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

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

事件循環(huán)

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

功能：判斷循環(huán)是否結(jié)束、宏觀任務隊列等邏輯

如何分析異步執(zhí)行的順序：

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

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

根據(jù)調(diào)用次序，確定宏任務中的微任務執(zhí)行次序；

根據(jù)宏任務的觸發(fā)規(guī)則和調(diào)用次序，確定宏任務的執(zhí)行次序；

確定整個順序。

eg:
setTimeout 把整個代碼分割成了 2 個宏觀任務，這里不論是 5 秒還是 0 秒，都是一樣的。
第一個宏觀任務中，包含了先后同步執(zhí)行的 console.log(“a”); 和 console.log("b")
setTimeout 后，第二個宏觀任務執(zhí)行調(diào)用了resolve，然后 then 中的代碼異步得到執(zhí)行，所以調(diào)用了 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云服務器代碼只執(zhí)行一次前端比java哪個難 java做后臺比前端 javascript里的

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103709.html

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

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

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

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

xiongzenghui 2019-08-30 10:54 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執(zhí)行？

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

zorpan 2019-08-26 13:47 評論0 收藏0
重學前端學習筆記（九）--JavaScript中的對象分類

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

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