在async和await中同步使用定时器

最新推荐文章于 2025-06-03 17:12:23 发布
最新推荐文章于 2025-06-03 17:12:23 发布
阅读量7.1k 收藏 8
点赞数 3
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zjscy666/article/details/90234265
本文探讨了如何在async和await中同步使用定时器，通过封装Promise来实现。文章通过多个代码示例解释了浏览器执行机制、Promise的立即执行特性和await的等待作用，强调了在同一函数中使用await才能保证执行顺序。同时，介绍了在定时器中使用async函数时，只有等待Promise完成才会继续执行后续代码，揭示了await与Promise结合的关键点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    今天一哥们问我async和await中使用定时器如何同步，这个问题涉及到很多东西，但是小编研究后发现是可行的，虽然async没法直接和setTimeout做到同步，但是await接受一个Promise，我们可以利用Promise再封装一层！利用浏览器事件执行的顺序达到我们的目的！不多说了，上代码。

    

    大家来猜猜看结果是啥，我们运行下。
    

    你可能会有疑问，为啥是这个结果，且听小编细细解释！按照浏览器机制，当c()执行的时候，会先执行出现1，由于Promise是立即执行函数，所以出现了1.5和2，setTimeout先等等再执行，因为await的原因，所以3是最末尾执行的，也就是要等Promise执行完后，再执行3，到此我们暂时搁置c这个方法。细心的你可能看到了，c()下面有从console.log(4)，那么开始出现的1，1.5，2，4，等到外面的线程执行完毕后，再来执行定时器，定时器里我们放了ajax请求，感谢chrome，我们直接用fetch就好，反正原理都一样！定时器按照顺序执行下来，首先出现promise1，细心的你可能会发现我们把定时器的回调函数也变成了async和await函数，所以我们先吧fetch执行完，获得请求结果，但是这里因为跨域问题，所以报错了，能说明是先执行了这个fetch函数就好，然后就执行fetch下面的代码，出现a的值，也就是55，再把a给promise的钩子，也就是resolve()，这个时候Promis

最低0.47元/天 解锁文章

200万优质内容无限畅学
小鬼难缠
关注
一文讲清事件循环（Event loop）、async/await、定时器事件执行机制
Yuk_325的博客
06-04 1174
JS的单线程是因为他是一个浏览器脚本语言，他的主要用途是与用户互动以及操作DOM，如果JS是多线程语言，那么一个线程新增DOM一个线程删除了该DOM，浏览器将以哪个线程为准呢？所以为了避免复杂性和各种冲突就采用了单线程方式。此后。
async/await定时器
weixin_51434199的博客
03-21 2614
async/await定时器 举例：延迟5秒后发送请求 await使用必须在async里面使用，而且返回是Promise对象 所以在添加定时器时，应该把定时器放在Promise对象里，如： //a，b两个名是自定义名字 const b = function a() { return new Promise(resolve => { setTimeout(()=>{ //需要返回的数据 resolve('a')
async await结合定时器，将异步变成同步
cui_hope的博客
11-08 545
异步变同步
JavaScript async/await指南
最新发布
白衣胜雪
06-03 1406
函数命名：async函数建议添加Async后缀（可选），如定义方式：优先使用普通函数定义，避免箭头函数（可读性更好）// 推荐// 不推荐变量命名：await后的变量名建议体现异步操作含义，如能用async/await就不用传统Promise：除非需要处理极其复杂的异步流程控制每个await必配try…catch：避免未捕获的异步错误导致程序崩溃合理选择并行/顺序执行：IO密集型任务用Promise.all并行处理，计算密集型任务考虑Web Worker。
js——使用async 实现定时器功能
weixiao的博客
06-04 1030
下面是使用async 设置定时器，并间隔时间来输出内容： async function sleep(ms = 5000) { return new Promise(resolve => { setTimeout(resolve, ms); }); } 示例代码：
如何将含有定时器setTimeout函数变为一个同步函数
树上骑个猴的博客
12-29 5724
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> </style> <body> <script> const myFun = async () => { return new Promis
async/await让异步操作同步执行的方法详解
10-16
- `await`关键字只能在`async`函数内部使用，用于等待Promise解析并返回结果。它会暂停当前`async`函数的执行，直到Promise解析或拒绝，并将Promise的结果赋值给`await`后面的表达式。 ```javascript async ...
JavaScript异步编程：async、await的使用
pan_junbiao的博客
09-26 1209
async 和 await 是在 ECMAScript 2017 (ES7) 中引入的特性，用于处理异步操作。它们允许你以一种更加简洁和同步的方式来编写异步代码。async 函数表示它会返回一个 Promise，而 await 关键字用于等待一个 Promise 解决。async 是一个函数修饰符，用于声明一个函数是异步的。调用 async 函数时，该函数会立即返回一个 Promise 对象，即使函数体内部没有显式返回 Promise，JavaScript 也会自动将函数的结果封装成 Promise 对象。
async / await 详解
When you can't win by being better, you can win by being different.
07-24 1524
当遇到 await，会先暂停 await 及后边代码的执行，直到 Promise 的状态发生改变后，才会继续执行 await 以及后边的任务await 本质是 then 的语法糖，其实是个微任务在 await new Promise 中如果包含一个定时器，定时器的回调函数中写 resolve() 或者reject()，那么这个定时器是个宏任务，会在宏任务队列排队完成后，再改变 Promise 的状态，然后 await 才能执行，再取消阻塞。
async/await
visibleforest的博客
08-11 1061
通过这一章的学习，我们已经了解了Promise是如何解决异步回调地狱问题的，接下来我们来 扩展一个新的知识——async和await 一、什么是async/await？ async/await 是基于Promise实现的。 async/await 使得异步代码看起来像同步代码。 以前的方法有回调函数和Promise, async/await是写异步代码的新方法。 二、async/await语法 async函数返回一个Promise对象，可以使用then 方法添加回调函数。当函数执行的时候，一旦遇
js异步编程: Promise, async, await
weixin_44992737的博客
07-30 880
js异步编程: Promise, async, await
一个简单的 Async/Await 示例：一个计时器
君子居易
03-13 544
因此，和以前一样，我使用 Stopwatch 来计算每次迭代所花费的时间，并调整下一次迭代的计时器等待间隔。这个局部函数是异步的。在这个后来的版本中，就好像我们在两个不同的事物之间交流状态。在 async/await 版本中，我们“等待”剩余时间并继续循环，而在定时器类版本中，我们设置了 Interval 属性。例如，在 async/await 版本中，我使用 while 循环来对迭代进行建模。总而言之，async/await 版本允许我们对计时器逻辑进行建模，而基于事件的版本则需要我们进行协调。
Async 异步转同步
Front小思的博客
07-13 1249
前要：今天写react的一对多视频会议的项目时，4秒刷新一次会议成员，每一次4秒重新请求接口的时候，正在会议的成员的视频有的重新加载！就想到4秒刷新的时候获取回来的数组进行和视图的数组进行对比，有改变就会默默刷新掉对应的参数，静默更新状态而不影响当前正在视频的会议！...
async和await使用
浅夏博客
03-08 356
<script> function testAwait (x) { return new Promise(resolve => { setTimeout(() => { resolve(x); console.log(x) }, 20000); }); } console.log("222") async function helloAsync() { // async await 会等待testAwait()触发时候...
使用定时器
X W F
07-11 225
window 对象包含 4 个定时器专用方法，说明如下表所示，使用它们可以实现代码定时执行，或者延迟执行，使用定时器可以设计演示动画。 window 对象定时器方法列表 方法 说明 setInterval() 按照执行的周期（单位为毫秒）调用函数或计算表达式 setTimeout() 在指定的毫秒数后调用函数或计算表达式 clearInterval() 取消由 setInterval() 方法生成的定时器 clearTimeout() 取消由 setTimeout() 方法生成的定时器 【setTimeou
给 setTimeout、setInterval 配备 await 写法
大概关于
04-23 3361
setTimeout、setInterval 是两个常用的异步函数。 但作为异步函数，他们不支持 Promise或者 async/await写法。 代码写起来： setTimeout(() => { console.log('执行一些操作') setTimeout(() => { console.log('执行另一些操作') // setTimeout ... }, 3000) }, 1000) 不好看！ 尽管经过简单的封装，可以达到目的，但每次用到都封装一次——重
定时器问题
Acettest's Blogs
06-14 542
System.Threading.Timer 它让线程池线程定时调用一个方法。 public sealed class Timer:MarchalByRefObject,IDisposable{ public Timer(TimerCallback callback, Object state, Int32 dueTime, Int32 period); public Ti...
async/await基本使用
qq_45593068的博客
04-20 788
async/await基本使用 asunc/await的底层学习可以学习es6，它其实是一个genterator的语法糖。 学习async/await需要掌握基本的Promise的基本使用.then() 结论： 1、async/await返回的是一个Promise对象，所以可以对他进行.then操作 2、async/await后面跟着的如果不是Promise对象那么该是同步就是同步，是异...
async await函数和setTimeout套用问题
坚信万物皆可切的切图仔
12-23 3080
async await函数是generator函数的语法糖，可以看作是以同步的语法执行异步语句，解决了连续调用promise导致的回调地狱问题。一般工作中，我们往往在需要连续请求接口时使用async await语法糖。但是如果第二个要调用的接口需要延迟执行呢，很多同学就不知道怎么办了，甚至只能被迫改回.then嵌套的格式。
vue中怎使用async和await
07-27
在Vue中使用async和await，可以通过在方法前面加上async关键字来定义异步函数，然后在需要等待的地方使用await关键字等待异步操作的结果。例如，可以在Vue组件的方法中使用async和await来处理异步请求。 引用\[1\]中的示例代码展示了在Vue中使用async和await的基本用法。可以定义一个异步函数，使用await关键字等待axios.get方法返回的Promise对象的结果。然后可以在异步函数外部使用.then方法来处理异步操作的结果。 引用\[2\]中提到，async/await是一种编写异步代码的新方法，它建立在Promise的基础上，让异步代码看起来更像同步代码。它的使用场景包括处理异步请求、处理定时器、处理文件读写等。 总结起来，在Vue中使用async和await可以更方便地处理异步操作，使代码更加清晰易读。可以在Vue组件的方法中使用async关键字定义异步函数，然后使用await关键字等待异步操作的结果。这样可以避免回调地狱，使代码更加简洁和易于维护。 #### 引用[.reference_title] - *1* [Vue接口调用（三）async/await用法](https://blog.youkuaiyun.com/m0_55990909/article/details/123981292)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue中使用async和await(一文教会你)](https://blog.youkuaiyun.com/m0_52040370/article/details/124660219)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue中async和await的使用](https://blog.youkuaiyun.com/m0_58974838/article/details/117636647)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值