摘要：回調(diào)函數(shù)回調(diào)函數(shù)是將一個函數(shù)作為參數(shù)，傳遞給另一個函數(shù)，然后在外部函數(shù)中調(diào)用該函數(shù)來完成某種例程或動作。案例源碼回調(diào)函數(shù)處理都是基于的發(fā)展利用方法自動迭代

閱讀時間：12 minutes
文章類型：理論知識 & 案例演示
案例需求：用JavaScript實現(xiàn)，3個小球先后運動，完成接力賽跑
案例源碼：見文章最后
引言：
前端開發(fā)中，異步處理必不可少；
過去，我們經(jīng)常用回調(diào)函數(shù)來完成異步處理，因此也經(jīng)常產(chǎn)生回調(diào)地獄（callback hell）；
今天，我們用實例來對比異步處理的方法；
是時候用async來處理我們的異步流程了。

回調(diào)函數(shù)： 是將一個函數(shù)作為參數(shù)，傳遞給另一個函數(shù)，然后在外部函數(shù)中調(diào)用該函數(shù)來完成某種例程或動作。
用法：在函數(shù)內(nèi)部調(diào)用函數(shù)

function move(ele, target, callback) {
    let left = parseInt(getComputedStyle(ele)["left"]);
    let timer = setInterval(function () {
        if (left >= target) {
            clearInterval(timer);
            callback();
        } else {
            left += 2;
            ele.style.left = left + "px";
        }
    }, 4)
}

move(ball1, 200, function () { 
    move(ball2, 400, function () {
        move(ball3, 600, function () {
            alert("callback");
        });
    })
})

Promise： 是一個返回值的代理，它允許您將處理程序與異步操作的最終成功值或失敗原因相關(guān)聯(lián)。 這使異步方法可以像同步方法那樣返回值：不是立即返回最終值，而是異步方法返回一個Promise，以便在未來的某個時間點提供該值。
用法：Promise 對象是由關(guān)鍵字 new 及其構(gòu)造函數(shù)來創(chuàng)建的。該函數(shù)接收一個函數(shù)（executor function）作為它的參數(shù)。這個函數(shù)接受兩個函數(shù)——resolve 和 reject ——作為其參數(shù)。當異步任務(wù)順利完成且返回結(jié)果值時，會調(diào)用 resolve 函數(shù)；而當異步任務(wù)失敗且返回失敗原因（通常是一個錯誤對象）時，會調(diào)用reject 函數(shù)。

// 讓move方法擁有Promise功能

function move(ele, target) { 
    return new Promise(function (resolve, reject) {
        let left = parseInt(getComputedStyle(ele)["left"]);
        let timer = setInterval(function () {
            if (left >= target) { 
                clearInterval(timer); 
                resolve(); 
            } else { 
                left += 2; 
                ele.style.left = left + "px"; 
            }
        }, 4)
    })
}

move(ball1, 200).then(function () {
    return move(ball2, 400);
}).then(function () {
    return move(ball3, 600);
}).then(function () {
    alert("promise");
})

Generator：生成器函數(shù)在函數(shù)執(zhí)行時能暫停，還能從暫停處繼續(xù)執(zhí)行，相當于將函數(shù)分段執(zhí)行。
用法：必須用.next()配合 yield關(guān)鍵字使用；例如：

function *gen(){
yield 10;
y=yield "foo";
yield y;
}
var gen_obj=gen();
console.log(gen_obj.next());    // 執(zhí)行 yield 10，返回 10
console.log(gen_obj.next());    // 執(zhí)行 yield "foo"，返回 "foo"
console.log(gen_obj.next(10));  // 將 10 賦給上一條 yield "foo" 的左值，即執(zhí)行 y=10，返回 10
console.log(gen_obj.next());    // 執(zhí)行完畢，value 為 undefined，done 為 true   

// 函數(shù)move方法調(diào)用上面Promise中的move方法；
function move(ele, target) { 
    return new Promise(function (resolve, reject) {
        let left = parseInt(getComputedStyle(ele)["left"]);
        let timer = setInterval(function () {
            if (left >= target) { 
                clearInterval(timer); 
                resolve(); 
            } else { 
                left += 2; 
                ele.style.left = left + "px"; 
            }
        }, 4)
    })
}

let g = m();
g.next(); //讓第一個小球運動；
g.next(); //讓第二個小球運動；
g.next(); //讓第三個小球運動；

function co(it) {
    return new Promise(function (resolve, reject) {
        function next(d) {
            let { value, done } = it.next(d);
            if (!done) {
                value.then(function (data) {
                    next(data)
                }, reject)
            } else {
                resolve(value);
            }
        };
        next();
    });
}
// 一行代碼實現(xiàn)函數(shù)執(zhí)行，但是需要引入co庫；
co(m()).then(function () {
    alert("generator");
})

async： 異步函數(shù)聲明定義了一個異步函數(shù)，它返回一個AsyncFunction對象。當async函數(shù)執(zhí)行，返回一個Promise對象；
用法：用async聲明函數(shù)，函數(shù)內(nèi)配合await使用。

// 調(diào)用上面的move()方法；
function move(ele, target) { 
    return new Promise(function (resolve, reject) {
        let left = parseInt(getComputedStyle(ele)["left"]);
        let timer = setInterval(function () {
            if (left >= target) { 
                clearInterval(timer); 
                resolve(); 
            } else { 
                left += 2; 
                ele.style.left = left + "px"; 
            }
        }, 4)
    })
}

async function a() {
    await move(ball1, 200);
    await move(ball2, 400);
    await move(ball3, 600);
}
a().then(function () {
    alert("async")
})

通過上述4種方法的對比，我們可以看出JavaScript這門語言的發(fā)展和進步；
ES6+增加了很多實用功能和方法，將有助于前期代碼的編寫以及后期代碼的維護，是時候用 async/await來處理我們的異步操作了。

案例源碼：