js同步(微任務 巨集任務)非同步任務

2021-09-13 03:31:10 字數 1979 閱讀 3494

console.log(1);

settimeout(() => , 0);

new promise((resolve, reject) => ).then(data => );

console.log(2);

檢視輸出結果 瀏覽器與node

上述**可以看出執行順序,同步任務(先執行巨集任務,在執行微任務),遍歷非同步佇列,執行非同步任務

settimeout setinterval 是非同步任務,promise.then()是微任務,new promise()是巨集任務

巢狀執行案例分析
/**

* 1. 程式先執行同步任務,在執行非同步任務

* 2.同步任務分為巨集任務和微任務

*/async function testsometing()

async function testasync()

async function test() ).then(data => );

const v1 = await testsometing();

console.log(v1);

const v2 = await testasync();

console.log(v2);

console.log(v1, v2);

}test();

var promise = new promise(resolve => ); //3

promise.then(val => console.log(val));

settimeout(() => , 3000);

console.log("test end...");

/*1. 程式從上到下執行,遇到test()函式執行,執行test函式裡面的**,同樣分為同步非同步的情況

1)輸出 「test start...」

2)promise是乙個巨集任務 輸出 「async 裡面的promise」 後續**會被推入微任務佇列

3)遇見 await await後面的會被轉換為promise promise裡面的**是巨集任務,then()裡面的**是微任務,所以執行後面的 testsometing 這個函式,需要分析 testsomething 這個函式 輸出「執行testsometing」 遇到函式的返回值,對應 await 來說,這個return的值作為 then 裡面的引數,會被 v1這個變數接收 await 會阻止後續**的執行 test() 目前執行完畢

4)遇見 promise 輸出 『promise start..』 後續**推入到微任務

5)後續遇見定時器,非同步任務,推入非同步佇列

6)輸出 「test end」 全部巨集任務執行完畢,檢查微任務佇列

7)第乙個微任務是執行 test()函式推入的 輸出「async裡面的promise裡面的then」

8)還記得 test() 裡面的await 後面的 微任務執行 輸出 「test something」

9) 繼續向下執行 執行 testasync 輸出 "執行testasync"

10) 再次推入微任務

11)執行 promise 那乙個微任務 輸出 promise

12)10步的時候推入了乙個微任務,繼續執行 輸出 「hello async」

13)遇見 console 執行 「testsometing hello async」

14)微任務執行完畢 執行非同步任務,就是定時器 輸出 「settime1」

JS微任務和巨集任務

1.巨集任務 包括整體 script,settimeout,setinterval i o ui 互動事件 setimmediate node.js 環境 2.微任務 promise mutaionobserver process.nexttick node.js 環境 promise.resolv...

Promise 微任務 巨集任務和同步

js的執行步驟是 先執行同步,在執行微任務,最後執行巨集任務。一下 let promise new promise resolve 0 console.log promise then value console.log then console.log 外面的console 當js順序執行的時候遇...

promise的佇列,巨集任務,微任務,同步任務

promise裡面有乙個特別的任務,就是微任務 同步任務 微任務 巨集任務 settimeout 0 代表的是巨集任務 new promise resove reject then console.log hello 這裡面輸出的結果是 同步任務 then console.log hello 同步任...