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

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

回調函數： 是將一個函數作為參數，傳遞給另一個函數，然后在外部函數中調用該函數來完成某種例程或動作。
用法：在函數內部調用函數

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： 是一個返回值的代理，它允許您將處理程序與異步操作的最終成功值或失敗原因相關聯。 這使異步方法可以像同步方法那樣返回值：不是立即返回最終值，而是異步方法返回一個Promise，以便在未來的某個時間點提供該值。
用法：Promise 對象是由關鍵字 new 及其構造函數來創建的。該函數接收一個函數（executor function）作為它的參數。這個函數接受兩個函數——resolve 和 reject ——作為其參數。當異步任務順利完成且返回結果值時，會調用 resolve 函數；而當異步任務失敗且返回失敗原因（通常是一個錯誤對象）時，會調用reject 函數。

// 讓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：生成器函數在函數執行時能暫停，還能從暫停處繼續執行，相當于將函數分段執行。
用法：必須用.next()配合 yield關鍵字使用；例如：

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

// 函數move方法調用上面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();
    });
}
// 一行代碼實現函數執行，但是需要引入co庫；
co(m()).then(function () {
    alert("generator");
})

async： 異步函數聲明定義了一個異步函數，它返回一個AsyncFunction對象。當async函數執行，返回一個Promise對象；
用法：用async聲明函數，函數內配合await使用。

// 調用上面的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這門語言的發展和進步；
ES6+增加了很多實用功能和方法，將有助于前期代碼的編寫以及后期代碼的維護，是時候用 async/await來處理我們的異步操作了。

案例源碼：