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