promise 本身不提供延迟执行能力，但可通过封装 settimeout 创建返回 promise 的函数实现延迟效果，核心是用 promise 包裹定时逻辑并在指定时间后调用 resolve；支持取消需借助标记位或 abortcontroller 模拟；常用于 async/await 场景控制节奏，需避免直接返回 timeout id 等常见误区。
Promise 本身不提供延迟执行能力，但可以通过封装 setTimeout 创建一个返回 Promise 的函数来实现延迟效果。核心思路是：用 Promise 包裹异步定时逻辑，在指定时间后调用 resolve（或 reject）。
使用 Promise 封装 setTimeout
这是最常用、最直接的方式。定义一个函数，接收毫秒数和可选的返回值，返回一个在指定时间后 resolve 的 Promise：
- 创建新 Promise，内部调用
setTimeout - 定时器触发时调用
resolve(value)，让 Promise 进入 fulfilled 状态 - 若需支持错误场景，也可传入 reject 逻辑（如超时失败）
function delay(ms, value = undefined) {
return new Promise(resolve => setTimeout(() => resolve(value), ms));
}
// 使用
delay(1000).then(() => console.log('1秒后执行'));
delay(2000, 'done').then(msg => console.log(msg)); // 输出 'done'
支持取消的延迟 Promise（进阶）
原生 Promise 不可取消，但可通过额外机制模拟取消行为，比如使用 AbortController 或标记位控制是否执行 resolve：
- 在 Promise 内部设置一个布尔标志
isCancelled - setTimeout 回调中先判断是否已取消，再决定是否 resolve
- 暴露一个
cancel()方法修改标志位
function cancellableDelay(ms, value) {
let isCancelled = false;
const promise = new Promise(resolve => {
setTimeout(() => {
if (!isCancelled) resolve(value);
}, ms);
});
return {
promise,
cancel() { isCancelled = true; }
};
}
// 使用
const { promise, cancel } = cancellableDelay(3000, 'hello');
cancel(); // 在 3s 前调用，promise 不会 resolve
组合已有 Promise 实现延迟（如 await delay）
在 async 函数中，常配合 await 使用 delay 函数，使代码看起来像同步延迟：
- 必须确保 delay 返回的是 Promise，否则 await 无意义
- 可用于控制请求节流、重试间隔、动画节奏等场景
- 注意避免阻塞主线程——delay 只是“等待”，不占用 CPU
async function fetchWithDelay() {
console.log('开始请求');
await delay(500); // 暂停 500ms
const data = await fetch('/api');
return data.json();
}
避免常见误区
写 delay 时容易忽略几个关键点：
- 不要直接返回 setTimeout：它返回的是 timeout ID，不是 Promise
- 不要在 Promise 外层加 try/catch 试图捕获定时器错误：setTimeout 本身同步执行，不会抛异常
- 慎用 Promise.reject 做超时失败：除非明确需要失败语义，否则默认 resolve 更符合“延迟”本意
- 注意 this 绑定和闭包变量：在循环中多次调用 delay 时，确保每个定时器作用域正确
