promise 封装 settimeout 的核心是将其转为可链式调用、支持 await 的异步操作:基础版用 new promise 包裹 settimeout 并在回调中 resolve;增强版可选 reject 超时错误;封装后可用于 async/await 流程、节流重试等,但需注意性能、精度及取消机制。

用 Promise 封装 setTimeout 很简单,核心是把延时逻辑变成可链式调用、能用 await 的异步操作。
基础封装:返回一个 Promise
最常用的方式是写一个函数,接收毫秒数和可选的返回值,返回一个在指定时间后 resolve 的 Promise:
- 用
new Promise包裹setTimeout - 在定时器回调中调用
resolve(传入值)或reject(如需错误处理) - 不传值时默认 resolve
undefined,传了就返回该值
示例:
function delay(ms, value = undefined) {return new Promise(resolve => setTimeout(resolve, ms, value));
}
支持 reject 的增强版
如果需要超时失败(比如模拟请求超时),可以加个开关或单独参数控制是否 reject:
- 传入
shouldReject = false,默认成功;设为true则在时间到时调用reject - 也可以封装成带 timeout 错误类型的版本,比如
reject(new Error('Timeout'))
示例:
function delay(ms, shouldReject = false) {return new Promise((resolve, reject) => {
setTimeout(() => {
shouldReject ? reject(new Error('Timeout')) : resolve();
}, ms);
});
}
配合 async/await 使用
封装后就能自然融入异步流程,避免嵌套回调:
- 直接
await delay(1000)暂停 1 秒 - 搭配其他 Promise(如
fetch)做节流、重试、等待初始化等 - 多个延时可串行或并行,例如
await Promise.all([delay(100), delay(200)])
示例:
async function example() {console.log('start');
await delay(500);
console.log('after 500ms');
}
常见用途与注意事项
这个封装虽小,但很实用:
- 用于 UI 动画延迟、防抖节流、测试 mock 延迟响应
- 注意不要滥用——频繁创建微任务可能影响性能,简单延时够用即可
-
setTimeout本身不精确,实际延迟可能略长,别用于高精度计时 - 如果需取消延时,原生
setTimeout不支持 cancel,可用AbortController或额外封装取消逻辑











