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