利用es6的async函数，编写动画顺序执行代码

今日天气比较冷，办公室氛围也冷了下来，难得的安静氛围，终于平息了往日的喧闹。

于是乎，我看了一下es6的async函数章节，学习一下新的知识。此篇文章用以记录 async 函数的实现原理。

翻到了 async 函数的实现原理 小节，其中文中有个用以部署一系列的动画的例子，让我心动不已。据文章所述，该例子可解决平日里让我懊恼的尴尬问题：怎么优雅地编写多个动画顺序执行代码（不要写一大堆嵌套的回调那种）。

但是es6入门书籍里面的例子是伪代码例子，可能需要转些弯才行，因此下面会给出一个模拟动画的真实案例：

思路便是拿定时器来开刀：

var anim = function (ms) {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            resolve(ms);

        }, ms);

    });

};

async function chainAnim (animations) {

    let ret = null;

    for (let an of animations) {

        ret = await anim(an);

        console.log(an);

    }

    return ret;

}

let res = chainAnim([1000, 2000, 3000]);

执行以上代码，讲道理就会：等待一秒，输出1000，再等待两秒，输出2000，最后，等待三秒，输出3000。

这样子把定时器想象成动画的持续时间，其实就已经实现了动画的按顺序执行，且可以监听到整个动画的最终完成回调，即名为'3000'的动画。

res.then(r => {

    console.log('最后一个动画是：' + r + ' 完成了。');

});

好了，至此案例结束，是不是简单易用？比嵌套的回调写法要好多了。

总结：其实案例的精髓之处还是得归功于es6的async函数，特别是await，顾名思义--“挂起”，先“挂起”不执行，接收到“命令”后再执行。本人对es6也并不是研究很深，如果对async，await语法不了解的，可以前往阮一峰大神的es6入门站点去查阅一番。-----------至此共勉-----------