北京住房和城乡建设部官方网站最火网站排名

🌟 Promise 和 setTimeout 的区别

虽然 Promise 和 setTimeout 都用于处理异步操作，但它们在机制和执行顺序上有很大区别。要理解它们的区别，必须先了解 Event Loop。

---

一、核心区别

特性	Promise	setTimeout
异步队列	微任务队列（Microtask Queue）	宏任务队列（Macrotask Queue）
何时执行	当前事件循环结束后立即执行	下一轮事件循环时才执行
执行优先级	高	低
常见用途	异步操作、异步链式调用	定时任务、延时执行

---

🚀 二、Event Loop 详解

JavaScript 是单线程的，使用**事件循环（Event Loop）**来处理异步任务。任务分为两类：

1. 宏任务（Macrotask）：
   • 主代码块（script）
   • setTimeout、setInterval
   • 事件回调（如点击、网络请求）
2. 微任务（Microtask）：
   • Promise 回调（then, catch, finally）
   • MutationObserver
   • queueMicrotask

---

Event Loop 执行顺序：

1. 执行同步任务（全局代码）。
2. 执行所有微任务队列中的任务。
3. 执行一个宏任务队列中的任务。
4. 重复步骤 2 和 3，直到任务队列为空。

---

📝 三、代码示例：Promise 和 setTimeout 执行顺序

来看一个经典示例：

console.log("script start");setTimeout(() => {console.log("setTimeout");
}, 0);Promise.resolve().then(() => {console.log("promise1");
}).then(() => {console.log("promise2");
});console.log("script end");

---

执行分析：

1. 同步代码执行：

   script start
   script end
   

   同步任务先执行。

2. 微任务执行：

   promise1
   promise2
   

   微任务比宏任务优先级高，Promise 回调属于微任务队列。

3. 宏任务执行：

   setTimeout
   

   宏任务在所有微任务执行完成后才会执行。

---

输出顺序：

script start
script end
promise1
promise2
setTimeout

---

🪜 四、再来一个复杂点的示例

setTimeout(() => {console.log("timeout1");
}, 0);Promise.resolve().then(() => {console.log("promise1");setTimeout(() => {console.log("timeout2");}, 0);
}).then(() => {console.log("promise2");
});console.log("script end");

---

执行分析：

1. 同步任务：

   script end
   

   直接打印。

2. 微任务：

   promise1
   promise2
   

   两个 then 回调依次执行。

3. 宏任务：

   timeout1
   timeout2
   

   两个 setTimeout 回调依次执行。

---

最终输出：

script end
promise1
promise2
timeout1
timeout2

---

🎯 五、真实场景应用：

1. 数据请求和处理

通常会使用 Promise 来进行数据请求和异步处理：

fetch("https://api.example.com/data").then(response => response.json()).then(data => console.log("Data received:", data)).catch(error => console.error("Error:", error));

2. 轮询操作

在轮询操作中，可以结合 setTimeout 和 Promise：

function pollData() {setTimeout(() => {fetch("https://api.example.com/status").then(response => response.json()).then(data => {console.log("Status:", data);pollData();  // 继续轮询});}, 1000);
}pollData();

---

🌐 六、总结

1. 执行优先级：

   • Promise 属于微任务，优先级高。
   • setTimeout 属于宏任务，优先级低。

2. 事件循环顺序：

   • 执行同步任务。
   • 执行所有微任务。
   • 执行下一个宏任务。

3. 编程应用：

   • 使用 Promise 实现异步链式调用。
   • 使用 setTimeout 实现延迟执行。

---

💡 面试要点：

1. 为什么 Promise 比 setTimeout 先执行？

   • 因为 Promise 属于微任务，而 setTimeout 属于宏任务。

2. 如何控制异步任务顺序？

   • 利用 async/await 或将异步操作放在 Promise 中。

3. 如何保证异步操作的顺序执行？

   • 通过链式调用（then）、async/await、或将任务放入微任务队列中。

希望这些讲解能帮助你彻底理解 Promise 和 setTimeout 的区别以及 Event Loop 的执行顺序！