js執行順序

2022-04-10 03:57:14 字數 2524 閱讀 9040

本篇隨筆主要通過兩個案例來梳理promise執行順序和promise、async/await執行順序,介紹之前預設大家已經了解這兩個api的使用方法並且了解js巨集任務與微任務概念。文章末尾會附上相關資料,有興趣的可以檢視。

一、promise

console.log('script start');

settimeout(

function

() , 0);

promise.resolve().then(

function

() ).then(

function

() );

console.log('script end');

大概看幾眼,直接上答案和分析:script start、script end、promise1、promise2、settimeout;

開始分析:

1、第乙個輸出大家都沒問題,**執行到第二行遇到settimeout,js引擎把定時器**函式當做乙個巨集任務放入**佇列(callback queue),讓出js主線程繼續往下執行;

2、到第五行是個promise.resolve()非同步執行函式(微任務),所以js引擎把then後面的**函式放入當前呼叫棧末尾,讓出js主線程繼續往下執行。

3、執行完最後一行,輸出script end;此時at the end of a task,we process microtasks(當前巨集任務執行完畢,開始執行微任務,也就是第2步中的),輸出promise1,接著繼續往下執行,又遇到了promise**函式,所以也把第二個then後面的**函式當成微任務放入當前呼叫棧末尾。

4、因為當前呼叫棧中的微任務必須先於下乙個巨集任務執行,所以繼續執行第3步中的微任務,輸出promise2。

5、當前呼叫棧中**全部執行完,根據事件迴圈機制,js引擎將**佇列中巨集任務放入呼叫棧中執行,輸出settimeout。

二、promise、async/await

async function

async1()

async

function

async2()

console.log('script start')

settimeout(

function

(),0)

async1();

new promise(function

(resolve)).then(

function

())console.log('script end')

最後輸出:

script start

async start

async2

promise1

script end

promise2

async1 end

settimeout

分析:1、首先輸出script start,然後將settimeout的**函式當成乙個巨集任務放入**佇列,讓出js主線程,執行async1()。雖然async1是用async宣告的非同步函式,但是他本身依舊是乙個立即執行函式,所以進入async1,執行輸出async start。

2、直到遇到了await(async wait的縮寫)這個熊孩子,看js是怎麼處理他的。遇到await之後,js會執行完他後面的表示式/函式,然後跳出這個非同步函式。這裡呢,await後面跟的用async宣告的async2非同步函式,所以執行完,await後面是乙個promise物件(未resolve),跳出async1。

3、執行到new promise,立即輸出promise1,然後是他的resolve(),所以暫停執行,把promise的**函式當成乙個微任務放到當前呼叫棧末尾,跳出promise,執行最後一行,輸出script end。

4、注意注意,下面的不好理解。接著執行第2步中的async1,此時await後面的promise開始resolve,所以js將async2函式的返回值(promise物件)的**函式當做乙個微任務,放到當前呼叫棧末尾,js主線程又讓出async1函式。

5、此時當前呼叫棧中巨集任務執行完畢,立即按順序執行微任務。也就是第3步中的,直接輸出promise2。接著執行第4步中產生的微任務(當然,沒有執行任何東西),這會之後,js才正式通過await那一行,輸出async1 end。這就是為什麼promie2先於async1 end 輸出。

6、掃掃尾,js執行下乙個巨集任務,輸出settimeout,到此全部結束。

上面的我加粗的那兩個輸出內容,是大家最疑惑的地方,也是最不好理解的地方,希望大家可以好好解讀一下我的分析。

async/await編碼的技巧

promise、async和await之執行順序的那點事

tasks, microtasks, queues and schedules

tasks, microtasks, queues and schedules(翻譯)

理解js中的async/await 

學習資料

掘進翻譯計畫

JS執行順序

一 語法分析 瀏覽器將所有js檢查一遍,看有沒有語法錯誤,這裡並不會執行,沒有錯誤則進行第二步,預編譯 二 預編譯 首先要理解函式宣告整體提公升,變數 宣告提公升。這裡要注意變數的提公升,一般我們宣告乙個變數都是 var a 1 console.log a 1 但實際上拆分成了兩步,真正執行是這樣的...

js執行順序

執行緒 cpu 排程的最小單位 程序 cpu 資源分配的最小單位 js是單執行緒的,在同一時間,只能做一件事。但是js有同步任務和非同步任務。同步 有a,b兩段 執行完a後執行b 非同步 有a,b兩段 a和b同時執行 在非同步任務中還有微任務和巨集任務 微任務 promise,process.nex...

js 執行順序

同步任務 非同步任務 同步任務 立即執行 非同步任務 進入到非同步佇列當中 event queue eg ajax,settimeout,then,setinterval event loop 事件迴圈 task macro task 巨集任務 micro task 微任務 macro task 巨...