promise,then,setTimeout -- 細緻探討執行流程

ParaSLee發表於2018-05-16

本文原理：

JavaScript是單執行緒，setTimeout會讓程式碼置於執行緒末尾。

Promise建立後與正常程式碼一樣順序執行。

Promise在狀態變為resolve後才會觸發後續的then

讀完本文大約需要15-25分鐘
本文前置知識：基礎js，Promise物件，ES6其他基礎知識
閱讀難度：初級
本文所有程式碼及輸出結果都寫了出來，可以不用編譯器編譯，直接瀏覽文章

如果你知道以下程式碼的執行結果，那麼本文對你的收穫就比較有限

const showNode = document.getElementById("show");

showNode.innerHTML += "normal | ";

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
  setTimeout(() => { resolve("then |"); }, 0)
})

promise.then((res) => {
  setTimeout(() => { showNode.innerHTML += 'then wait | ' }, 0)
  showNode.innerHTML += res;
  return " next then | ";
}).then((res) => {
  showNode.innerHTML += res;
  return " next next then | ";
}).then((res) => {
  showNode.innerHTML += res;
})

setTimeout(() => { showNode.innerHTML += "wait | " }, 0)

// 輸出： normal | promise | then | next then | next next then | wait | 
//       then wait |
複製程式碼

正文開始

Javascript 引擎單執行緒機制

首先明確，JavaScript引擎是單執行緒機制
JavaScript 是單執行緒執行的，無法同時執行多段程式碼。當某一段程式碼正在執行的時候，所有後續的任務都必須等待，形成一個任務佇列。一旦當前任務執行完畢，再從佇列中取出下一個任務，這也常被稱為 “阻塞式執行”。
可以理解為：只有在 JS執行緒中沒有任何同步程式碼要執行的前提下才會執行非同步程式碼

有關js執行緒的知識可以移步 JS 單執行緒與 setTimeout 執行原理

promise,then,setTimeout的執行流程

正常順序執行 -> then -> setTimeouts -> then中 setTimeouts

注1： showNode 是我用於獲取html的元素，直接顯示在頁面上，替換console.log

注2: 事例程式碼中，新加的程式碼或有修改的程式碼，會在程式碼後面加上相應的註釋

正常執行：按照正常從上往下的順序執行

環境1 普通程式碼在promise之前

showNode.innerHTML += "normal | ";

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
})

// 輸出： normal | promise |
複製程式碼

環境2 promise在普通程式碼之前

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
})
  
showNode.innerHTML += "normal | ";

// 輸出： promise | normal |
複製程式碼

promise在建立後便立即執行，執行順序按照正常程式碼執行順序從上往下執行

加上then : 正常執行完成後，執行then

環境3 新增then

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
  resolve("then |")                             // 新加程式碼
})

promise.then((res) => {                         // 新加程式碼
  showNode.innerHTML += res;                    // 新加程式碼
})                                              // 新加程式碼

showNode.innerHTML += "normal | ";              // 程式碼位置更改

// 輸出： promise | normal | then |
複製程式碼

當promise的狀態由 pending 變為 fulfilled 後，對應使用的 then 才會執行。
正常執行的程式碼處在執行第一批，then 則處在第二批，當第一批執行完成後再執行第二批

外部setTimeout ：在then之後執行

環境4 新增到全域性裡的setTimeout

setTimeout(() => { showNode.innerHTML += "wait | " }, 0)  // 新加程式碼

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
  resolve("then |")
})

promise.then((res) => {
  showNode.innerHTML += res;
})

showNode.innerHTML += "normal | ";

// 輸出： promise | normal | then | wait |
複製程式碼

setTimeout會將程式碼執行推到執行緒末端，處在第三批

環境5 多個then

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
  resolve("then |")
})

promise.then((res) => {
  showNode.innerHTML += res;
  return " next then | ";                       // 新加程式碼
}).then((res) => {                              // 新加程式碼
  showNode.innerHTML += res;                    // 新加程式碼
  return " next next then | ";                  // 新加程式碼
}).then((res) => {                              // 新加程式碼
  showNode.innerHTML += res;                    // 新加程式碼
})

showNode.innerHTML += "normal | ";

setTimeout(() => { showNode.innerHTML += "wait | " }, 0)

// 輸出： promise | normal | then | next then | next next then | wait |
複製程式碼

按照之前提到的內容，正常順序執行的程式碼在第一批，then在第二批，setTimeout在第三批，
第一批完成後執行第二批，第二批完成後執行第三批

promise中的 setTimeout：使用setTimeout後，都被提到程式末尾，然後按照正常程式碼那樣順序輸出

環境6 promise 中加入 setTimeout

let promise = new Promise((resolve, reject) => {
  // 新加程式碼
  setTimeout(() => { showNode.innerHTML += "promise wait | "; }, 0) 
  showNode.innerHTML += "promise | ";
  resolve("then |")
})

promise.then((res) => {
  showNode.innerHTML += res;
  return " next then | ";
}).then((res) => {
  showNode.innerHTML += res;
  return " next next then | ";
}).then((res) => {
  showNode.innerHTML += res;
})

showNode.innerHTML += "normal | ";

setTimeout(() => { showNode.innerHTML += "wait | " }, 0)

// 輸出：promise | normal | then | next then | next next then |
//      promise wait | wait |
複製程式碼

因為Promise在第一批，Promise中設定的setTimeout被提到了第三批
在第三批執行過程中，流程也是從上往下順序執行

環境7 外部setTimeout 在 promise 中的 setTimeout 之前

showNode.innerHTML += "normal | ";

setTimeout(() => { showNode.innerHTML += "wait | " }, 0)  // 程式碼位置更改

let promise = new Promise((resolve, reject) => {
  setTimeout(() => { showNode.innerHTML += "promise wait | "; }, 0)  
  showNode.innerHTML += "promise | ";
  resolve("then |")
})

promise.then((res) => {
  showNode.innerHTML += res;
  return " next then | ";
}).then((res) => {
  showNode.innerHTML += res;
  return " next next then | ";
}).then((res) => {
  showNode.innerHTML += res;
})

// 輸出： normal | promise | then | next then | next next then | wait | 
//       promise wait |
複製程式碼

環境8 promose中用setTimeout包裹resolve

showNode.innerHTML += "normal | ";

setTimeout(() => { showNode.innerHTML += "wait | " }, 0)

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
  setTimeout(() => { resolve("then |"); }, 0)     // 程式碼修改
})

promise.then((res) => {
  showNode.innerHTML += res;
  return " next then | ";
}).then((res) => {
  showNode.innerHTML += res;
  return " next next then | ";
}).then((res) => {
  showNode.innerHTML += res;
})

// 輸出： normal | promise | wait | then | next then | next next then |
複製程式碼

還是按照批次來思考, setTimeout在第一批中設定，裡面執行的函式被提到第三批中。
promise只有狀態變為 fulfilled 後才會觸發相應的 then
在第一批中將控制狀態的 resolve() 提到第三批，等於將原本的第二批 then 所執行的內容全部提到第三批。
第一批為正常順序執行的程式碼，第二批為空，第三批按照從上到下的順序執行。

環境9 將Promise外的setTimeout下移

showNode.innerHTML += "normal | ";

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
  setTimeout(() => { resolve("then |"); }, 0)     
})

promise.then((res) => {
  showNode.innerHTML += res;
  return " next then | ";
}).then((res) => {
  showNode.innerHTML += res;
  return " next next then | ";
}).then((res) => {
  showNode.innerHTML += res;
})

setTimeout(() => { showNode.innerHTML += "wait | " }, 0) // 程式碼位置更改

// 輸出： normal | promise | then | next then | next next then | wait |
複製程式碼

環境10 then中的setTimeout

showNode.innerHTML += "normal | ";

let promise = new Promise((resolve, reject) => {
  showNode.innerHTML += "promise | ";
  setTimeout(() => { resolve("then |"); }, 0)
})

promise.then((res) => {
  // 新加程式碼
  setTimeout(() => { showNode.innerHTML += 'then wait | ' }, 0)  
  showNode.innerHTML += res;
  return " next then | ";
}).then((res) => {
  showNode.innerHTML += res;
  return " next next then | ";
}).then((res) => {
  showNode.innerHTML += res;
})

setTimeout(() => { showNode.innerHTML += "wait | " }, 0)

// 輸出： normal | promise | then | next then | next next then | wait | 
//      then wait |
複製程式碼

第一批：正常順序執行程式碼。
第二批：空
第三批：被setTimeout提到執行緒末尾的
第四批：在then中被setTimeout提到執行緒末尾

——————————

全文到此結束

本文按照自己的理解，按照 “分批次” 的思想進行講解，希望能讓文章顯得更加通俗易懂。

如果有什麼不對的地方，請在評論區指出，或者私信我。

你的建議可以讓我的下一篇文章更加精彩

Thank you for watching

Javascript執行機制（setTimeout/Promise）
2019-03-08
JavaScriptPromise
Promise探討
2019-01-02
Promise
async await、Promise、setTimeout執行順序
2018-06-07
AIPromise
Promise為什麼比setTimeout先執行？
2019-03-16
Promise
process.nextTick,Promise.then,setTimeout,setImmediate執行順序
2019-01-03
Promise
事件迴圈 EventLoop（Promise，setTimeOut，async/await執行順序）
2021-02-16
事件OOPPromiseAI
[一道題搞蒙你] - setTimeout 與 Promise 執行順序
2018-10-11
Promise
js基礎進階–promise和setTimeout執行順序的問題
2019-02-16
JSPromise
探討Java中的多執行緒概念 - foojay
2021-05-12
Java執行緒
淺析setTimeout與Promise
2018-08-12
Promise
探討阻塞佇列和執行緒池原始碼
2020-12-27
佇列執行緒原始碼
探討Classloader的 getResource("") 獲取執行根目錄方法
2019-02-23
探討Classloader的 getResource(“”) 獲取執行根目錄方法
2019-03-04
一道setTimeout async promise執行順序的筆試題引發的思考
2019-02-16
Promise筆試
從setTimeout理解JS執行機制
2019-03-22
JS
從setTimeout/setInterval看JS執行緒
2018-04-19
JS執行緒
移動App網路優化細節探討
2018-04-14
APP優化
Js中process.nextTick，setImmediate，setTimeout，Promise.then，async/await終極非同步執行順序全解析
2020-09-28
JSPromiseAI非同步
多次執行mysql_fetch_array()的指標歸位問題探討
2021-09-09
MySql指標
OPCUA 探討（一）
2024-12-05
深入探討HBASE
2020-11-16
深入探討 Undefined
2018-10-23
Undefined
面試官：為什麼 Promise 比setTimeout() 快？
2021-12-13
面試Promise
setTimeout&Promise&Async之間的愛恨情仇
2018-11-28
Promise
MyBatis執行流程
2024-05-12
MyBatis
Mysql 執行流程
2022-04-21
MySql
MapReduce執行流程
2021-11-09
HA執行流程
2020-10-24
SpringMVC執行流程
2021-04-04
SpringMVC
[技術分析]探討大世界遊戲的製作流程及技術——前期流程篇
2020-08-13
遊戲
ES6 Promise 執行解析
2019-03-04
Promise
Promise 原始碼：同步執行 resolve
2019-03-04
Promise原始碼
uau型樹脂排水溝及基礎施工細緻計劃流程說明
2022-03-19
對多執行緒程式，單核cpu與多核cpu如何工作相關的探討
2019-01-19
執行緒單核
Springboot 加密方案探討
2023-10-14
Spring Boot加密
px em rem 探討
2018-03-07
REM
【探討】批次操作以及多執行緒下保證事務的一致性
2024-11-29
執行緒
for 迴圈執行流程
2024-12-03

promise,then,setTimeout -- 細緻探討執行流程

正文開始

Javascript 引擎單執行緒機制

promise,then,setTimeout的執行流程

正常執行 ：按照正常從上往下的順序執行

加上then : 正常執行完成後，執行then

外部setTimeout ： 在then之後執行

promise中 的 setTimeout：使用setTimeout後，都被提到程式末尾，然後按照正常程式碼那樣順序輸出

Thank you for watching

相關文章

正常執行：按照正常從上往下的順序執行

外部setTimeout ：在then之後執行

promise中的 setTimeout：使用setTimeout後，都被提到程式末尾，然後按照正常程式碼那樣順序輸出