promise,then,setTimeout -- 细致探讨执行流程

本文原理：

JavaScript是单线程，setTimeout会让代码置于线程末尾。

Promise建立后与正常代码一样顺序执行。

Promise在状态变为resolve后才会触发后续的then

1. 读完本文大约需要15-25分钟
2. 本文前置知识：基础js，Promise对象，ES6其他基础知识
3. 阅读难度：初级
4. 本文所有代码及输出结果都写了出来，可以不用编译器编译，直接浏览文章

如果你知道以下代码的执行结果，那么本文对你的收获就比较有限

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 +&#