[技术分享]在 Async 和 Await 中同步使用定时器

shangjin发布于4 个月前 • 155 次阅读

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

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

      你可能会有疑问,为啥是这个结果,且听小编细细解释!按照浏览器机制,当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(),这个时候Promise的链式结构then就执行了,出现pp和a的值,也就是55,最后外层的Promise执行完毕,我们再度执行了3,也就是出现了我们想要的结果!

      接下来我们来看几个变形:

image

      大家来猜猜结果是啥,下面我们看答案!     image

      答案是不是有点出乎意料,大家可能会觉得顺序应该是1,1.5,2,1.5,2,4,因为小编一开始说了Promise是立即执行函数,但是大家请好好理解下面这句话,立即执行函数也要执行到才会打印出相应的值,上面的代码第一个Promise不执行完是不会执行下面的Promise的,那么结果好理解了!

      我们再来个变形:     image

      大家来猜猜这个结果是啥,注意第一个new Promise没有await,想好答案后,看下面:

image

      我们先来看开始1,1.5,2,1.5,2,4,因为第一个Promise没有await,所以我们在第一个Promise执行后,立即执行到了第二个Promise,然后重点来了,2个setTimeout,浏览器按照顺序,先执行第一个promise2,到这一步大家都没问题,但是很多人会困惑为啥下面是promise1,定时器里都是async函数,那么小编告诉你原因,这2个定时器async因为是在2个Promise中,也就是说只要外面的第一个Promise不是await,那么这2个定时器回调函数永远是并发执行,相当于2个异步,所以我们说的await等待必须在同一个函数中!接下来就好理解了,两个定时器发送ajax请求,因为浏览器始终是单线程,所以谁先返回就执行谁!因为2个请求的链接都相同,所以第一个返回了执行第一个,所以出现了66,qq,66,然后第二个返回出现55,99,55,因为必须await那个Peomise执行完毕,才能执行3,所以出现了3!

      我们再来第三个变形,让第一个Promise请求慢点,看看会出现啥情况:

image

      下面我们来看答案: image   ​

      开始都是一样的,后面是不是出乎你的意料,当下面那个Promise的定时器请求结果先返回的时候,出现了55,pp,55,然后执行了3,还记得我们上面说过的那句话吗?只要await那个Promise执行完毕,下面那句console.log(3)才会执行,所以3先出来了,然后才是执行第一个Promise的定时器!

      我们来看最后一个变形,终极版,也是本文的最核心部分:      image

      大家花几分钟好好捋捋,然后小编公布答案了!     image           开头大家没问题,还是还是看定时器部分,首先第二个定时器返回,先执行catch方法中的console.log(a);resolve(a),所以出现了55,以及第二个Promise中的pp和resolve传过去的a的值,也就是55,然后因为定时器都是async函数,只有await执行完毕,才会执行下面,所以出现了968,然后出现3,我们再来看第一个定时器,有个不一样的地方,896出现在resolve前面,因为resolve也会等待,所以先执行了896,再执行了第一个resolve中then的内容,最后执行了111!大家可能会有个疑问,为何会先执行resolve(),再执行111,还记得我们开头说过await后面是Promise才能起作用吧,resolve因为继承了Promise的一些属性方法(具体大家可以看Promsie实现),所以await才能对Promise起作用,所以才能先执行then中的内容,然后再执行111,如果把resolve换成setTimeout,那么里面的内容是出现在111后面了!

      讲了这么多,大家是不是有点绕晕了:总结下

       一.await只解析Promise对象,对于同一个函数来说,await才能按照顺序执行

      二.定时器要和await合用,必须使用Promise

共收到 0 条回复