在 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 对象。

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 实现暂停执行的介绍已完成。如需了解更多相关技术内容,可查阅本站往期文章或继续浏览后续推荐内容,感谢支持。

作者最新文章