当前位置：首页 > news >正文

promise和settimeout的区别，谈一谈eventloop

news 来源：原创 2025/5/19 22:38:24

🌟 Promise 和 setTimeout 的区别

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

一、核心区别

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

🚀 二、Event Loop 详解

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

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

Event Loop 执行顺序：

执行同步任务（全局代码）。
执行所有微任务队列中的任务。
执行一个宏任务队列中的任务。
重复步骤 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");

执行分析：

同步代码执行：
```
script start
script end
```
同步任务先执行。
微任务执行：
```
promise1
promise2
```
微任务比宏任务优先级高，Promise 回调属于微任务队列。
宏任务执行：
```
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");

执行分析：

同步任务：
```
script end
```
直接打印。
微任务：
```
promise1
promise2
```
两个 then 回调依次执行。
宏任务：
```
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();

🌐 六、总结

执行优先级：
- Promise 属于微任务，优先级高。
- setTimeout 属于宏任务，优先级低。
事件循环顺序：
- 执行同步任务。
- 执行所有微任务。
- 执行下一个宏任务。
编程应用：
- 使用 Promise 实现异步链式调用。
- 使用 setTimeout 实现延迟执行。

💡 面试要点：

为什么 Promise 比 setTimeout 先执行？
- 因为 Promise 属于微任务，而 setTimeout 属于宏任务。
如何控制异步任务顺序？
- 利用 async/await 或将异步操作放在 Promise 中。
如何保证异步操作的顺序执行？
- 通过链式调用（then）、async/await、或将任务放入微任务队列中。