国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

pinecone / 3461人閱讀

摘要:版本以及之前,本身還沒有異步執行代碼的能力,宿主環境傳遞給引擎,然后按順序執行,由宿主發起任務。采納引擎術語,把宿主發起的任務稱為宏觀任務,把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。

筆記說明
重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的專欄學習【原文有winter的語音】,如有侵權請聯系我,郵箱:kaimo313@foxmail.com。
一、引言
一個 JavaScript 引擎會常駐于內存中,它等待著 宿主JavaScript 代碼或者函數傳遞給它執行。

1、ES3版本以及之前,JavaScript 本身還沒有異步執行代碼的能力,宿主環境傳遞給 JavaScript 引擎,然后按順序執行,由宿主發起任務。

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

3、采納JSC引擎術語,把宿主發起的任務稱為宏觀任務,把JavaScript引擎發起的任務稱為微觀任務

二、宏觀和微觀任務
JavaScript 引擎等待宿主環境分配宏觀任務,在 Node 術語中,把這個部分稱為事件循環

1、用偽代碼來表示:跑在獨立線程中的循環

while(TRUE) {
    r = wait();
    execute(r);
}

2、整個循環做的事情基本上就是反復 等待 - 執行,這里的執行過程,其實都是一個宏觀任務。可以大致理解為:宏觀任務的隊列就相當于時間循環。

3、在宏觀任務中,JavaScriptPromise 還會產生異步代碼JavaScript 必須保證這些異步代碼在一個宏觀任務中完成,因此,每個宏觀任務中又包含了一個微觀任務隊列:如下圖所示

例如:Promise 永遠在隊列尾部添加微觀任務。setTimeout 等宿主 API,則會添加宏觀任務。

三、Promise
JavaScript 語言提供的一種標準化的異步管理方式,當進行 io、等待或者其它異步操作的函數,不返回真實結果,而返回一個承諾,函數的調用方可以在合適的時機,選擇等待這個承諾兌現
3.1、基本用法示例
    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve,duration);
        })
    }
    sleep(1000).then( ()=> console.log("finished"));

Promisethen 回調是一個異步的執行過程。

3.2、Promise 函數中的執行順序
    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    r.then(() => console.log("c"));
    console.log("b")

    // 輸出順序:a  b  c
3.3、setTimeout 混用的 Promise
    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    setTimeout(()=>console.log("d"), 0)
    r.then(() => console.log("c"));
    console.log("b")

    // 輸出順序:a  b  c  d

Promise 產生的是 JavaScript 引擎內部的微任務,而 setTimeout 是瀏覽器 API,它產生宏任務。所以d 必定在 c 之后輸出。

3.4、一個耗時 1 秒的 Promise
    setTimeout(()=>console.log("d"), 0)
    var r = new Promise(function(resolve, reject){
        resolve()
    });
    r.then(() => {
        var begin = Date.now();
        while(Date.now() - begin < 1000);
        console.log("c1")
        new Promise(function(resolve, reject){
            resolve()
        }).then(() => console.log("c2"))
    });

    // 輸出順序:c1  c2  d

這個例子很好的解釋了微任務優先的原理

3.5、如何分析異步執行的順序

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

2、在每個宏任務中,分析有多少個微任務

3、根據調用次序,確定宏任務中的微任務執行次序

4、根據宏任務的觸發規則和調用次序,確定宏任務的執行次序

5、確定整個順序

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

    // 輸出順序:a  b  c(c要等5秒)

第一個宏觀任務中,包含了先后同步執行的 console.log("a"); 和 console.log("b");。

setTimeout 后,第二個宏觀任務執行調用了 resolve,然后 then 中的代碼異步得到執行,調用了 console.log("c")

四、新特性:async/await
async/awaitES2016 新加入的特性,它提供了用 for、if 等代碼結構來編寫異步的方式,并且運行時基礎是 Promise

1、async 函數是在 function 關鍵字之前加上 async 關鍵字,這樣就定義了一個 async 函數,可以在其中使用 await 來等待一個 Promise

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(){
    console.log("a")
    await sleep(2000)
    console.log("b")
}

foo();

// 輸出順序:a  b(b要等兩秒)

2、async 嵌套

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(name){
    await sleep(2000)
    console.log(name)
}
async function foo2(){
    await foo("a");
    await foo("b");
}

foo2();

// 輸出順序:a(a等兩秒) b(b也等兩秒)
個人總結

看完這篇確實幫我解決了之前困擾我的問題,贊一個。。。明天也要加油鴨。。。。

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

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

相關文章

  • 重學前端學習筆記十七)--Promise里的代碼什么setTimeout執行

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

    zorpan 評論0 收藏0
  • 重學前端學習筆記十七)--Promise里的代碼什么setTimeout執行

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

    xiongzenghui 評論0 收藏0
  • 【16】winter重學前端 - JavaScript執行(一):Promise里的代碼什么se

    摘要:即使耗時一秒的執行完畢,再的,仍然先于執行了,這很好地解釋了微任務優先的原理。把整個代碼分割成了個宏觀任務,這里不論是秒還是秒,都是一樣的。 js實現異步的幾種形式 回調函數 事件監聽 - 事件驅動模式 發布/訂閱 - 觀察者模式 Promises對象 js異步歷史 一個 JavaScript 引擎會常駐于內存中,它等待著我們把JavaScript 代碼或者函數傳遞給它執行 在 ...

    Vicky 評論0 收藏0
  • 重學前端學習筆記(二十七)--JavaScript的詞法

    摘要:模板語法四種詞法定義二空白符號空白符號分類或稱是,是縮進符,字符串中寫的。注意換行符會影響的兩個重要語法特性自動插入分號和規則。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的專欄學習【原文有winter的語音】,如有侵權請聯系我,郵箱...

    jayzou 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<