在 JavaScript Promise 中利用 setTimeout 实现异步暂停
作者:半夏时间:2026-10-26 13:22:51浏览:603
本文介绍如何在 JavaScript 的 Promise 机制中,通过封装 setTimeout 来实现代码的暂停执行效果。针对直接使用 await 处理同步回调导致的错误,提供 sleep 函数的封装方案,展示如何利用 async/await 语法配合自定义延时函数,实现精确的异步流程控制与延时处理。
Promise 中实现异步暂停的需求
在基于 Promise 的异步编程场景中,有时需要引入延时机制来延迟后续代码的执行。
对于尚未深入理解 Promise 机制的开发者而言,可能会尝试一种直观的写法。
例如:
run();
async function run() {
console.log('1');
// 等待两秒之后执行
setTimeout(() => {
const data = await getData();
console.log(data);
}, 200);
}
function getData() {
return new Promise((resolve, reject) => {
resolve("200");
})
}常见错误写法分析
这种写法会导致 await 关键字报错,因为 setTimeout 的回调函数并未返回 Promise 对象。

封装 Sleep 函数
为了实现可靠的延时效果,我们可以先封装一个通用的 sleep 函数。
function x_sleep(time) {
return new Promise(resovle => {
setTimeout(() => {
resolve();
}, time)
})
}封装完成后,即可通过调用该 sleep 函数来实现延时处理逻辑。
完整的实现代码如下:
完整代码示例
run();
async function run() {
console.log("1");
// 停止2秒
await x_sleep(2000);
const data = await getData();
console.log(data);
}
function getData() {
return new Promise((resolve, reject) => {
resolve("200");
})
}
function x_sleep(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time)
})
}至此,关于在 JS Promise 中使用 setTimeout 实现暂停执行的介绍已完成。如需了解更多相关技术内容,可查阅本站往期文章或继续浏览后续推荐内容,感谢支持。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
