成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Vicky / 2283人閱讀

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

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

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

事件監(jiān)聽(tīng) - 事件驅(qū)動(dòng)模式

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

Promises對(duì)象

js異步歷史

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

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

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

宏觀和微觀任務(wù)

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

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

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

例子

Promise 永遠(yuǎn)在隊(duì)列尾部添加微觀任務(wù)

setTimeout 等宿主 API，則會(huì)添加宏觀任務(wù)

執(zhí)行順序：

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

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

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

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

事件循環(huán)

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

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

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

首先我們分析有多少個(gè)宏任務(wù)；

在每個(gè)宏任務(wù)中，分析有多少個(gè)微任務(wù)；

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

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

確定整個(gè)順序。

eg:
setTimeout 把整個(gè)代碼分割成了 2 個(gè)宏觀任務(wù)，這里不論是 5 秒還是 0 秒，都是一樣的。
第一個(gè)宏觀任務(wù)中，包含了先后同步執(zhí)行的 console.log(“a”); 和 console.log("b")
setTimeout 后，第二個(gè)宏觀任務(wù)執(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"));

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103709.html

相關(guān)文章

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

    摘要：版本以及之前，本身還沒(méi)有異步執(zhí)行代碼的能力，宿主環(huán)境傳遞給引擎，然后按順序執(zhí)行，由宿主發(fā)起任務(wù)。采納引擎術(shù)語(yǔ)，把宿主發(fā)起的任務(wù)稱為宏觀任務(wù)，把引擎發(fā)起的任務(wù)稱為微觀任務(wù)?；居梅ㄊ纠幕卣{(diào)是一個(gè)異步的執(zhí)行過(guò)程。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的...

    pinecone 評(píng)論0 收藏0

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

    摘要：版本以及之前，本身還沒(méi)有異步執(zhí)行代碼的能力，宿主環(huán)境傳遞給引擎，然后按順序執(zhí)行，由宿主發(fā)起任務(wù)。采納引擎術(shù)語(yǔ)，把宿主發(fā)起的任務(wù)稱為宏觀任務(wù)，把引擎發(fā)起的任務(wù)稱為微觀任務(wù)?；居梅ㄊ纠幕卣{(diào)是一個(gè)異步的執(zhí)行過(guò)程。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的...

    xiongzenghui 評(píng)論0 收藏0

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

    摘要：版本以及之前，本身還沒(méi)有異步執(zhí)行代碼的能力，宿主環(huán)境傳遞給引擎，然后按順序執(zhí)行，由宿主發(fā)起任務(wù)。采納引擎術(shù)語(yǔ)，把宿主發(fā)起的任務(wù)稱為宏觀任務(wù)，把引擎發(fā)起的任務(wù)稱為微觀任務(wù)?；居梅ㄊ纠幕卣{(diào)是一個(gè)異步的執(zhí)行過(guò)程。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的...

    zorpan 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（九）--JavaScript中的對(duì)象分類

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

    ShowerSun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<