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

資訊專欄INFORMATION COLUMN

Promise介紹--異步篇

hersion / 3056人閱讀

摘要：知乎的問題也有何幻大神詳細(xì)的講解。我們之前說的異步任務(wù)隊列，指的是。每次拿到隊列上任務(wù)并執(zhí)行之后，都會去檢查隊列，以此循環(huán)。主線程執(zhí)行完畢則檢查隊列并執(zhí)行，輸出和。以上是最新版本的中測試結(jié)果。

這部分內(nèi)容源于知乎上的一個提問。

setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
    console.log(1)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(2)
}).then(function(){
    console.log(5)
});
console.log(3);

// 1
// 2
// 3
// 5
// 4

之前我們說過then方法添加的回調(diào)函數(shù)都是異步執(zhí)行的，所以按照我們正常的認(rèn)知，結(jié)果應(yīng)該是12345，因?yàn)?b>4是先添加到異步隊列，而5在之后添加到異步隊列。

知乎的問題也有何幻大神詳細(xì)的講解。這里我就簡單的說一下吧。

我們都知道javascript是單線程的，也就是說，一個時間只能做一件事。所以，所有的任務(wù)都要按照一定的順序排隊，然后一個一個執(zhí)行。如果所有的任務(wù)都是同步的，那就沒有什么問題，代碼按照從前到后的順序依次執(zhí)行就可以了，但我們實(shí)際工作過程中，難免會有一些操作需要異步執(zhí)行——比如事件，比如ajax，比如setTimeout。

所以，瀏覽器會維護(hù)一個任務(wù)隊列(task queue)，任務(wù)隊列是先進(jìn)先出的，也就是說，先進(jìn)入任務(wù)隊列的會先執(zhí)行。當(dāng)主線程任務(wù)執(zhí)行完畢，就會查看任務(wù)隊列中有沒有新任務(wù)，如果有，則把第一個任務(wù)放到主線程中執(zhí)行，以此循環(huán)往復(fù)，這個過程也就是Event loops。

我之前也一直都以為瀏覽器中只有一個任務(wù)隊列，看到這個問題后才知道。原來瀏覽器中的任務(wù)隊列不止一個，且優(yōu)先級也不同。基本上可以分為如下兩種：

macro-task: script（整體代碼）, setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task: process.nextTick, 原生Promise, Object.observe, MutationObserver

我們看到原生Promise和setTimeout分別屬于micro-task和macro-task。我們之前說的異步任務(wù)隊列，指的是macro-task。而micro-task的執(zhí)行順序，與之不同。

在執(zhí)行完主線程上的所有任務(wù)時，會先去查看micro-task隊列中有沒有任務(wù)，如果有，則依次執(zhí)行micro-task隊列中的所有任務(wù)，之后才去查看macro-task隊列。每次拿到macro-task隊列上任務(wù)并執(zhí)行之后，都會去檢查micro-task隊列，以此循環(huán)。所以上面題目中結(jié)果是12354就很明了了。

我們看一個例子，并詳細(xì)解釋它的執(zhí)行流程。

console.log("script1");

setTimeout(function() {
  console.log("setTimeout1");
}, 300);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script2");

setTimeout(function() {
  console.log("setTimeout2");
  Promise.resolve().then(function() {
    console.log("promise3");
  })
}, 0);

// script1
// script2
// promise1
// promise2
// setTimeout2
// promise3
// setTimeout1

結(jié)果如代碼中注釋所示。具體執(zhí)行步驟如下：

①代碼從上到下執(zhí)行，先打印出script1。

②執(zhí)行到第一個setTimeout時，發(fā)現(xiàn)300ms后把函數(shù)添加到macro-task隊列中。

③執(zhí)行Promise時，依次把輸出promise1和promise2的任務(wù)添加到micro-task隊列。

④打印script2。

⑤執(zhí)行第二個setTimeout時因?yàn)樵O(shè)置的是0ms，所以立即（其實(shí)瀏覽器有最少4ms的限制）添加到macro-task隊列中。

⑥主線程執(zhí)行完畢則檢查micro-task隊列并執(zhí)行，輸出promise1和promise2。

⑦然后檢查macro-task隊列，輸出setTimeout2，并把輸出promise3的任務(wù)添加到micro-task隊列。

⑧再次檢查micro-task隊列并執(zhí)行，輸出promise3。

⑨最后檢查macro-task隊列，輸出setTimeout1，因?yàn)樗?00ms后添加到macro-task隊列，所以后輸出。

規(guī)范中的流程是這個樣子，但是不同的瀏覽器中，實(shí)際輸出的結(jié)果可能會不相同。以上是最新版本的chrome中測試結(jié)果。

最后，推薦一篇外國友人的博客，我就是看了這篇文章才完全弄清楚的，里面內(nèi)容講的特別詳細(xì)。

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

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

相關(guān)文章

  • promise介紹--實(shí)現(xiàn)篇

    摘要：內(nèi)部總體上分為兩種情況，一種是當(dāng)前對象狀態(tài)已經(jīng)變?yōu)榛颍藭r則直接把響應(yīng)的回調(diào)函數(shù)添加到異步隊列中，另一種情況是當(dāng)前對象狀態(tài)還是，此時則把響應(yīng)的回調(diào)函數(shù)依次添加到數(shù)組中。 今天，我?guī)е蠹乙徊揭徊礁?guī)范實(shí)現(xiàn)一個自己的Promise，大家可以對照我的第二篇文章Promise介紹--規(guī)范篇或官方規(guī)范來一一學(xué)習(xí)。 Promise內(nèi)部有三個固定的狀態(tài)，我們在文件中提前定義。 const PEN...

    shery 評論0 收藏0

  • ES6-7

    摘要：的翻譯文檔由的維護(hù)很多人說，阮老師已經(jīng)有一本關(guān)于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評論0 收藏0

  • Promise介紹--規(guī)范篇

    摘要：規(guī)范中對于構(gòu)造函數(shù)沒有明確說明，所以在此處拿出來講解一下。構(gòu)造函數(shù)只接收一個參數(shù)，且該參數(shù)必須是一個函數(shù)，任何其他的值比如等都會報一個的錯誤。 本篇文章是Promise系列文章的第二篇，主要是講解基于Promise/A+規(guī)范，在傳入不同類型的參數(shù)時，promise內(nèi)部分別會如何處理。本章的主要目的是讓大家對promise有一個更加深入的理解，也為下一篇講如何實(shí)現(xiàn)一個promise庫做準(zhǔn)...

    tylin 評論0 收藏0

  • promise介紹--基礎(chǔ)篇

    摘要：請求的傳統(tǒng)寫法改為后的寫法很顯然，我們把異步中使用回調(diào)函數(shù)的場景改為了等函數(shù)鏈?zhǔn)秸{(diào)用的方式。數(shù)組中第一個元素是異步的，第二個是非異步，會立即改變狀態(tài)，所以新對象會立即改變狀態(tài)并把傳遞給成功時的回調(diào)函數(shù)。 前言 Promise，相信每一個前端工程師都或多或少地在項目中都是用過，畢竟它早已不是一個新名詞。ES6中已經(jīng)原生對它加以支持，在caniuse中搜索一下Promise，發(fā)現(xiàn)新版的ch...

    tanglijun 評論0 收藏0

  • 深入探析koa之異步回調(diào)處理篇

    摘要：而之后，我們得到的是一個是一個對象，我們可以使用語句定義回調(diào)函數(shù)，函數(shù)的內(nèi)容呢，則是將讀取到的返回給并繼續(xù)讓從斷點(diǎn)處執(zhí)行。 在上一篇中我們梳理了koa當(dāng)中中間件的洋蔥模型執(zhí)行原理，并實(shí)現(xiàn)了一個可以讓洋蔥模型自動跑起來的流程管理函數(shù)。這一篇，我們再來研究一下koa當(dāng)中異步回調(diào)同步化寫法的原理，同樣的，我們也會實(shí)現(xiàn)一個管理函數(shù)，是的我們能夠通過同步化的寫法來寫異步回調(diào)函數(shù)。 1. 回調(diào)金字...

    Drinkey 評論0 收藏0

發(fā)表評論

0條評論

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