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

    今天一哥们问我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()，这个时候Promise的链式结构then就执行了，出现pp和a的值，也就是55，最后外层的Promise执行完毕，我们再度执行了3，也就是出现了我们想要的结果！

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

     

    大家来猜猜结果是啥，下面我们看答案！
    

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

    我们再来个变形：
    

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

    

    我们先来看开始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请求慢点，看看会出现啥情况：

    

    下面我们来看答案：

  

     开始都是一样的，后面是不是出乎你的意料，当下面那个Promise的定时器请求结果先返回的时候，出现了55，pp，55，然后执行了3，还记得我们上面说过的那句话吗？只要await那个Promise执行完毕，下面那句console.log(3)才会执行，所以3先出来了，然后才是执行第一个Promise的定时器！
     我们来看最后一个变形，终极版，也是本文的最核心部分：
     

    大家花几分钟好好捋捋，然后小编公布答案了！
    
    开头大家没问题，还是还是看定时器部分，首先第二个定时器返回，先执行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