今日天氣比較冷，辦公室氛圍也冷了下來，難得的安靜氛圍，終于平息了往日的喧鬧。

于是乎，我看了一下es6的async函數(shù)章節(jié)，學(xué)習(xí)一下新的知識。此篇文章用以記錄 async 函數(shù)的實現(xiàn)原理。

翻到了 async 函數(shù)的實現(xiàn)原理 小節(jié)，其中文中有個用以部署一系列的動畫的例子，讓我心動不已。據(jù)文章所述，該例子可解決平日里讓我懊惱的尷尬問題：怎么優(yōu)雅地編寫多個動畫順序執(zhí)行代碼（不要寫一大堆嵌套的回調(diào)那種）。

但是es6入門書籍里面的例子是偽代碼例子，可能需要轉(zhuǎn)些彎才行，因此下面會給出一個模擬動畫的真實案例：

思路便是拿定時器來開刀：

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]);

執(zhí)行以上代碼，講道理就會：等待一秒，輸出1000，再等待兩秒，輸出2000，最后，等待三秒，輸出3000。

這樣子把定時器想象成動畫的持續(xù)時間，其實就已經(jīng)實現(xiàn)了動畫的按順序執(zhí)行，且可以監(jiān)聽到整個動畫的最終完成回調(diào)，即名為'3000'的動畫。

res.then(r => {

    console.log('最后一個動畫是：' + r + ' 完成了。');

});

好了，至此案例結(jié)束，是不是簡單易用？比嵌套的回調(diào)寫法要好多了。

總結(jié)：其實案例的精髓之處還是得歸功于es6的async函數(shù)，特別是await，顧名思義--“掛起”，先“掛起”不執(zhí)行，接收到“命令”后再執(zhí)行。本人對es6也并不是研究很深，如果對async，await語法不了解的，可以前往阮一峰大神的es6入門站點去查閱一番。-----------至此共勉-----------