Promise 实现的 delay 函数通过封装 setTimeout 返回自动 resolve 的 Promise；基础版仅延时，增强版支持传值、取消和 reject；常用于模拟请求、节流防抖、UI 过渡及重试逻辑。
在 JavaScript 中，用 Promise 实现延时函数 delay 是一种常见且简洁的方式，核心是封装 setTimeout，返回一个在指定毫秒后自动 resolve 的 Promise。
基础写法：返回 Promise 并 resolve
最常用的实现是定义一个函数，接收毫秒数 ms，内部创建 Promise，在定时器回调中调用 resolve：
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}这样就能配合 await 使用：
async function example() {
console.log('开始');
await delay(1000);
console.log('1 秒后执行');
}增强版：支持传入值、取消或 reject
如果需要更灵活的控制，可以扩展功能：
立即学习“Java免费学习笔记（深入）”；
- 支持传入任意值，resolve 时返回该值（便于链式处理）
- 返回一个带
cancel方法的对象，用于手动清除定时器 - 可选添加超时 reject 逻辑（如模拟失败场景）
function delay(ms, value) {
let timerId;
const promise = new Promise((resolve, reject) => {
timerId = setTimeout(() => resolve(value), ms);
});
<p>promise.cancel = () => clearTimeout(timerId);
return promise;
}使用示例：
const task = delay(2000, 'done'); task.then(console.log); // 2秒后输出 'done' // task.cancel(); // 可随时取消
实际开发中的典型用法
延时函数常用于以下场景：
-
模拟 API 请求延迟：调试时替代真实接口，比如
await delay(800).then(() => fetchData()) - 节流/防抖辅助：配合状态重置，例如输入搜索前等待用户停顿
- 动画或 UI 状态过渡：隐藏加载态后延时显示结果，提升体验
-
重试逻辑：失败后
await delay(1000 * attempt)指数退避
注意事项与小技巧
使用时需留意几个细节：
-
delay(0)不会立即执行，仍会进入微任务队列，行为等价于Promise.resolve()后的异步时机 - 避免在循环中无节制地创建大量
delay，可能堆积未清除的定时器（尤其未做 cancel 时） - 若需精确时间控制（如音频、游戏），应知悉
setTimeout本身有最小延迟（通常 ≥4ms）和事件循环影响 - 现代项目中可直接用
setTimeout的 Promise 版本（Chrome 117+ 支持setTimeout(...).then），但兼容性考虑下自定义仍更稳妥
