建站
咨詢
售后
建站咨詢
新聞中心
實(shí)驗(yàn)
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到?？稻W(wǎng)站設(shè)計(jì)與保康網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋?？档貐^(qū)。
先做一個(gè)實(shí)驗(yàn)：來(lái)看看立即解決的 Promis 和立即超時(shí)( 0 毫秒的超時(shí))哪個(gè)執(zhí)行的更快?
- Promise.resolve(1).then(function resolve() {
- console.log('Resolved!');
- });
- setTimeout(function timeout() {
- console.log('Timed out!');
- }, 0);
- // logs 'Resolved!'
- // logs 'Timed out!'
Promise.resolve(1) 是一個(gè)靜態(tài)函數(shù)，可返回立即解決的 promise。setTimeout(callback, 0) 執(zhí)行延遲為 0 毫秒的回調(diào)。
打開(kāi)執(zhí)行并檢查控制臺(tái)。您會(huì)看到日志先打印了 'Resolved!' ，然后打印了 'Timeout completed!'。立即解決的承諾比立即超時(shí)處理得更快。
是因?yàn)?Promise.resolve(true).then(...) 在 setTimeout(..., 0) 之前被調(diào)用了，所以 promise 的處理過(guò)程會(huì)更快嗎?
那我們就修改一下實(shí)驗(yàn)條件，先調(diào)用 setTimeout(...，0)：
- setTimeout(function timeout() {
- console.log('Timed out!');
- }, 0);
- Promise.resolve(1).then(function resolve() {
- console.log('Resolved!');
- });
- // logs 'Resolved!'
- // logs 'Timed out!'
執(zhí)行并查看控制臺(tái)，結(jié)果是一樣的!
盡管 setTimeout(..., 0) 在 Promise.resolve(true).then(...) 之前被調(diào)用了，但是 'Resolved!' 仍然在 'Timed out!' 之前被輸出。
實(shí)驗(yàn)表明，立即解決的 promise 在立即超時(shí)之前已得到處理。所以。這是為什么?
事件循環(huán)
與異步 JavaScript 有關(guān)的問(wèn)題可以通過(guò)探索事件循環(huán)解答答。先回顧一下異步 JavaScript 的工作原理。
空的事件循環(huán)
調(diào)用棧(call stack) 是 LIFO(后進(jìn)先出)的結(jié)構(gòu)，用于存儲(chǔ)在代碼執(zhí)行期間創(chuàng)建的執(zhí)行上下文。簡(jiǎn)而言之，調(diào)用棧執(zhí)行用來(lái)函數(shù)。
Web API 是異步操作(fetch 請(qǐng)求、promises、計(jì)時(shí)器)，回調(diào)等待這里的工作完成。
**任務(wù)隊(duì)列(task queue)**是一個(gè) FIFO(先進(jìn)先出)的結(jié)構(gòu)，其中包含準(zhǔn)備好執(zhí)行的異步操作的回調(diào)。例如，超時(shí)的 setTimeout() 的回調(diào)(準(zhǔn)備執(zhí)行)進(jìn)入任務(wù)隊(duì)列中。
工作隊(duì)列(job queue) 是一個(gè) FIFO(先進(jìn)先出)的結(jié)構(gòu)，其中包含準(zhǔn)備執(zhí)行的 promise 的回調(diào)。例如，已解決的 resolve 或拒絕回調(diào)進(jìn)入工作隊(duì)列中。
最后，事件循環(huán)(event loop) 會(huì)一直監(jiān)視調(diào)用棧是否為空。如果調(diào)用棧為空，則事件循環(huán)會(huì)查找工作隊(duì)列或任務(wù)隊(duì)列，并使準(zhǔn)備好執(zhí)行的回調(diào)出隊(duì)到調(diào)用棧中。
工作隊(duì)列與任務(wù)隊(duì)列
下面從事件循環(huán)的角度來(lái)看一下前面的實(shí)驗(yàn)。我會(huì)逐步分析代碼的執(zhí)行情況。
(1) 調(diào)用堆棧執(zhí)行 setTimeout(..., 0) 并“安排”一個(gè)計(jì)時(shí)器。timeout() 回調(diào)存儲(chǔ)在 Web API 中：
- setTimeout(function timeout() { console.log('Timed out!');}, 0);
- Promise.resolve(1).then(function resolve() {
- console.log('Resolved!');
- });
事件循環(huán)
(2) 調(diào)用棧執(zhí)行 Promise.resolve(true).then(resolve) 并“安排”一個(gè) promise 解析。resolved() 回調(diào)存儲(chǔ)在 Web API 中：
- setTimeout(function timeout() {
- console.log('Timed out!');
- }, 0);
- Promise.resolve(1).then(function resolve() { console.log('Resolved!');});
事件循環(huán)
(3) promise 立即解決，計(jì)時(shí)器立即超時(shí)。這時(shí)計(jì)時(shí)器回調(diào) timeout() 被“排隊(duì)”到任務(wù)隊(duì)列，promise 回調(diào) resolve() 被“排隊(duì)”到工作隊(duì)列：
事件循環(huán)
(4) 這里是最有意思部分：事件循環(huán)優(yōu)先級(jí)使工作排在任務(wù)之上。事件循環(huán)使 promise 回調(diào) resolve() 從工作隊(duì)列中出隊(duì)，并將其放入調(diào)用棧中，然后調(diào)用棧執(zhí)行 promise 回調(diào) resolve()：
- setTimeout(function timeout() {
- console.log('Timed out!');
- }, 0);
- Promise.resolve(1).then(function resolve() {
- console.log('Resolved!');});
'Resolved!' 被輸出到控制臺(tái)。
Event Loop
(5) 最后，事件循環(huán)把計(jì)時(shí)器回調(diào) timeout() 從任務(wù)隊(duì)列中移出到調(diào)用棧中。然后調(diào)用棧執(zhí)行計(jì)時(shí)器回調(diào)timeout()：
- setTimeout(function timeout() {
- console.log('Timed out!');}, 0);
- Promise.resolve(1).then(function resolve() {
- console.log('Resolved!');
- });
'Timed out!' 已輸出到控制臺(tái)。
Event Loop
此時(shí)調(diào)用棧為空。腳本執(zhí)行已完成。
總結(jié)
為什么立即解決的 promise 比立即計(jì)時(shí)器處理得更快?
是由于事件循環(huán)的“優(yōu)先級(jí)”使任務(wù)隊(duì)列(存儲(chǔ)已實(shí)現(xiàn)的 promise 的回調(diào))中的任務(wù)從任務(wù)隊(duì)列(存儲(chǔ)超時(shí)的setTimeout() 回調(diào))中的任務(wù)中出隊(duì)。
網(wǎng)頁(yè)名稱：為什么Promis比setTimeout()更快？
網(wǎng)站URL：http://www.5511xx.com/article/coesjsh.html
