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

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

回調(diào)函數(shù)： 是將一個(gè)函數(shù)作為參數(shù)，傳遞給另一個(gè)函數(shù)，然后在外部函數(shù)中調(diào)用該函數(shù)來(lái)完成某種例程或動(dòng)作。
用法：在函數(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： 是一個(gè)返回值的代理，它允許您將處理程序與異步操作的最終成功值或失敗原因相關(guān)聯(lián)。 這使異步方法可以像同步方法那樣返回值：不是立即返回最終值，而是異步方法返回一個(gè)Promise，以便在未來(lái)的某個(gè)時(shí)間點(diǎn)提供該值。
用法：Promise 對(duì)象是由關(guān)鍵字 new 及其構(gòu)造函數(shù)來(lái)創(chuàng)建的。該函數(shù)接收一個(gè)函數(shù)（executor function）作為它的參數(shù)。這個(gè)函數(shù)接受兩個(gè)函數(shù)——resolve 和 reject ——作為其參數(shù)。當(dāng)異步任務(wù)順利完成且返回結(jié)果值時(shí)，會(huì)調(diào)用 resolve 函數(shù)；而當(dāng)異步任務(wù)失敗且返回失敗原因（通常是一個(gè)錯(cuò)誤對(duì)象）時(shí)，會(huì)調(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í)行時(shí)能暫停，還能從暫停處繼續(xù)執(zhí)行，相當(dāng)于將函數(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è)小球運(yùn)動(dòng)；
g.next(); //讓第二個(gè)小球運(yùn)動(dòng)；
g.next(); //讓第三個(gè)小球運(yùn)動(dòng)；

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();
    });
}
// 一行代碼實(shí)現(xiàn)函數(shù)執(zhí)行，但是需要引入co庫(kù)；
co(m()).then(function () {
    alert("generator");
})

async： 異步函數(shù)聲明定義了一個(gè)異步函數(shù)，它返回一個(gè)AsyncFunction對(duì)象。當(dāng)async函數(shù)執(zhí)行，返回一個(gè)Promise對(duì)象；
用法：用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")
})

通過(guò)上述4種方法的對(duì)比，我們可以看出JavaScript這門(mén)語(yǔ)言的發(fā)展和進(jìn)步；
ES6+增加了很多實(shí)用功能和方法，將有助于前期代碼的編寫(xiě)以及后期代碼的維護(hù)，是時(shí)候用 async/await來(lái)處理我們的異步操作了。

案例源碼：