摘要:同步任務(wù)宏任務(wù),微任務(wù),異步任務(wù)我是定時(shí)器,延遲執(zhí)行的是同步任務(wù)里面的宏任務(wù)我是里面的參數(shù),里面的方法是宏任務(wù)里面的微任務(wù)查看輸出結(jié)果瀏覽器與上述代碼可以看出執(zhí)行順序同步任務(wù)先執(zhí)行宏任務(wù),在執(zhí)行微任務(wù),遍歷異步隊(duì)列,執(zhí)行異步任務(wù)是異步任務(wù),
同步任務(wù)(宏任務(wù),微任務(wù)),異步任務(wù)
console.log(1); setTimeout(() => { console.log("我是定時(shí)器,延遲0S執(zhí)行的"); }, 0); new Promise((resolve, reject) => { console.log("new Promise是同步任務(wù)里面的宏任務(wù)"); resolve("我是then里面的參數(shù),promise里面的then方法是宏任務(wù)里面的微任務(wù)"); }).then(data => { console.log(data); }); console.log(2);
查看輸出結(jié)果 瀏覽器與node
上述代碼可以看出執(zhí)行順序,同步任務(wù)(先執(zhí)行宏任務(wù),在執(zhí)行微任務(wù)),遍歷異步隊(duì)列,執(zhí)行異步任務(wù)
setTimeout setInterval 是異步任務(wù),promise.then()是微任務(wù),new Promise()是宏任務(wù)嵌套執(zhí)行案例分析
/** * 1. 程序先執(zhí)行同步任務(wù),在執(zhí)行異步任務(wù) * 2.同步任務(wù)分為宏任務(wù)和微任務(wù) */ async function testSometing() { console.log("執(zhí)行testSometing"); return "testSometing"; } async function testAsync() { console.log("執(zhí)行testAsync"); return Promise.resolve("hello async"); } async function test() { console.log("test start..."); new Promise(resolve => { console.log("async 里面的promise"); resolve("async里面的promise里面的then"); }).then(data => { console.log(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 => { console.log("promise start.."); resolve("promise"); }); //3 promise.then(val => console.log(val)); setTimeout(() => { console.log("setTime1"); }, 3000); console.log("test end..."); /* 1. 程序從上到下執(zhí)行,遇到test()函數(shù)執(zhí)行,執(zhí)行test函數(shù)里面的代碼,同樣分為同步異步的情況 1)輸出 “test start...” 2)Promise是一個(gè)宏任務(wù) 輸出 “async 里面的promise” 后續(xù)代碼會(huì)被推入微任務(wù)隊(duì)列 3)遇見(jiàn) await await后面的會(huì)被轉(zhuǎn)換為Promise Promise里面的代碼是宏任務(wù),then()里面的代碼是微任務(wù),所以執(zhí)行后面的 testSometing 這個(gè)函數(shù),需要分析 testSomething 這個(gè)函數(shù) 輸出“執(zhí)行testSometing” 遇到函數(shù)的返回值,對(duì)應(yīng) await 來(lái)說(shuō),這個(gè)return的值作為 then 里面的參數(shù),會(huì)被 v1這個(gè)變量接收 await 會(huì)阻止后續(xù)代碼的執(zhí)行 test() 目前執(zhí)行完畢 4)遇見(jiàn) promise 輸出 ‘promise start..’ 后續(xù)代碼推入到微任務(wù) 5)后續(xù)遇見(jiàn)定時(shí)器,異步任務(wù),推入異步隊(duì)列 6)輸出 “test end” 全部宏任務(wù)執(zhí)行完畢,檢查微任務(wù)隊(duì)列 7)第一個(gè)微任務(wù)是執(zhí)行 test()函數(shù)推入的 輸出“async里面的promise里面的then” 8)還記得 test() 里面的await 后面的 微任務(wù)執(zhí)行 輸出 “test something” 9) 繼續(xù)向下執(zhí)行 執(zhí)行 testAsync 輸出 "執(zhí)行testAsync" 10) 再次推入微任務(wù) 11)執(zhí)行 promise 那一個(gè)微任務(wù) 輸出 promise 12)10步的時(shí)候推入了一個(gè)微任務(wù),繼續(xù)執(zhí)行 輸出 “hello async” 13)遇見(jiàn) console 執(zhí)行 “testSometing hello async” 14)微任務(wù)執(zhí)行完畢 執(zhí)行異步任務(wù),就是定時(shí)器 輸出 “setTime1” */
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/99237.html
摘要:為了最終確認(rèn),進(jìn)行最后一次驗(yàn)證,在第一個(gè)里面多加一層同步新加行新加行新加行新加行新加行新加行同步輸出結(jié)果如下同步同步確認(rèn)完畢,的確是一層一層的執(zhí)行。而是微任務(wù),是宏任務(wù)。 久經(jīng)前端開(kāi)發(fā)沙場(chǎng),會(huì)經(jīng)歷各式各樣的需求,處理這些需求時(shí)候,會(huì)使用各種各樣的api和功能,這里集中對(duì)setTimeout和Promise的異步功能進(jìn)行討論一下。 單獨(dú)使用的執(zhí)行模式 這里就使用Promise作為例子,...
摘要:曾經(jīng)的理解首先,是單線程語(yǔ)言,也就意味著同一個(gè)時(shí)間只能做一件事,那么為什么不是多線程呢這樣還能提高效率啊假定同時(shí)有兩個(gè)線程,一個(gè)線程在某個(gè)節(jié)點(diǎn)上編輯了內(nèi)容,而另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn),這時(shí)瀏覽器就很懵逼了,到底以執(zhí)行哪個(gè)操作呢所以,設(shè)計(jì)者把 Event Loop曾經(jīng)的理解 首先,JS是單線程語(yǔ)言,也就意味著同一個(gè)時(shí)間只能做一件事,那么 為什么JavaScript不是多線程呢?這樣還能提...
摘要:同步異步是單線程的,每次只能做一件事情。像以下這種情況,代碼會(huì)按順序執(zhí)行,這個(gè)就叫同步。雖然是單線程,但是瀏覽器是多線程的,在遇到像事件等這種任務(wù)時(shí),會(huì)轉(zhuǎn)交給瀏覽器的其他工作線程上面提到的幾個(gè)線程執(zhí)行,執(zhí)行完之后將回調(diào)函數(shù)放入到任務(wù)隊(duì)列。 同步、異步 JS是單線程的,每次只能做一件事情。像以下這種情況,代碼會(huì)按順序執(zhí)行,這個(gè)就叫同步。 console.log(1); console.l...
摘要:?jiǎn)尉€程異步非阻塞然后,這又牽扯到了事件循環(huán)消息隊(duì)列,還有微任務(wù)宏任務(wù)這些。此步的位置不確定某個(gè)時(shí)刻后,定時(shí)器觸發(fā)線程通知事件觸發(fā)線程,事件觸發(fā)線程將回調(diào)函數(shù)加入消息隊(duì)列隊(duì)尾,等待引擎線程執(zhí)行。 前言 Philip Roberts 在演講 great talk at JSConf on the event loop 中說(shuō):要是用一句話來(lái)形容 JavaScript,我可能會(huì)這樣: Java...
摘要:而這些隊(duì)列由的事件循環(huán)來(lái)搞定宏任務(wù)與微任務(wù),在最新標(biāo)準(zhǔn)中,它們被分別稱(chēng)為與。我們梳理一下事件循環(huán)的執(zhí)行機(jī)制循環(huán)首先從宏任務(wù)開(kāi)始,遇到,生成執(zhí)行上下文,開(kāi)始進(jìn)入執(zhí)行棧,可執(zhí)行代碼入棧,依次執(zhí)行代碼,調(diào)用完成出棧。 寫(xiě)在前面 js是一門(mén)單線程的編程語(yǔ)言,也就是說(shuō)js在處理任務(wù)的時(shí)候,所有任務(wù)只能在一個(gè)線程上排隊(duì)被執(zhí)行,那如果某一個(gè)任務(wù)耗時(shí)比較長(zhǎng)呢?總不能等到它執(zhí)行結(jié)束再去執(zhí)行下一個(gè)。所以在...
閱讀 2825·2021-11-15 11:37
閱讀 2974·2021-09-23 11:21
閱讀 3086·2021-09-07 10:11
閱讀 3249·2019-08-30 15:53
閱讀 2906·2019-08-29 15:13
閱讀 1674·2019-08-26 13:57
閱讀 1180·2019-08-26 12:23
閱讀 2516·2019-08-26 11:51