JS定时器同步异步问题(顺序执行)

最新推荐文章于 2025-01-23 17:04:16 发布

原创最新推荐文章于 2025-01-23 17:04:16 发布 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文探讨了JavaScript中定时器的异步行为，并通过Promise将其转换为同步流程。展示了如何使用async/await结合Promise解决定时器导致的代码执行顺序问题。

定时器同步问题

场景

1.异步代码

代码如下（示例）：

   console.log('1')
   
   setTimeout(() => {
        console.log('2')
   }, 1500);

   console.log('3')

由于是定时器setTimeOut是异步的，运行结果是1 3 2
现在通过promise实现1 2 3的顺序

2.使用promise改为同步

代码如下（示例）：

 const f1 = async() => {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
                console.log('2')
            }, 1500);
        });
    }
        
 const f2 = async() => {
        console.log('1')
        await f1()
        console.log('3')
    }
    
  f2();