摘要：在閱讀本文之后你能了解怎樣使用回調(diào)函數(shù)。這是中回調(diào)函數(shù)的典型用法，它在中廣泛被使用。這意味著回調(diào)函數(shù)本質(zhì)上是一個(gè)閉包。使用命名或匿名函數(shù)作為回調(diào)在前面的例子以及的例子中，我們使用了再參數(shù)位置定義的匿名函數(shù)作為回調(diào)函數(shù)。

轉(zhuǎn)自：
張小俊128：http://www.html-js.com/articl...
_luxiao：http://luxiao1223.blog.51cto....

js里的解釋:
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

字面上理解下來就是，回調(diào)就是一個(gè)函數(shù)的調(diào)用過程。那么就從理解這個(gè)調(diào)用過程開始吧。函數(shù)a有一個(gè)參數(shù)，這個(gè)參數(shù)是個(gè)函數(shù)b，當(dāng)函數(shù)a執(zhí)行完以后執(zhí)行函數(shù)b。那么這個(gè)過程就叫回調(diào)。

其實(shí)中文也很好理解：回調(diào)，回調(diào)，就是回頭調(diào)用的意思。函數(shù)a的事先干完，回頭再調(diào)用函數(shù)b。

舉個(gè)現(xiàn)實(shí)的例子：約會(huì)結(jié)束后你送你女朋友回家，離別時(shí)，你肯定會(huì)說：“到家了給我發(fā)條信息，我很擔(dān)心你?！睂?duì)不，然后你女朋友回家以后還真給你發(fā)了條信息。小伙子，你有戲了。

其實(shí)這就是一個(gè)回調(diào)的過程。你留了個(gè)函數(shù)b（要求女朋友給你發(fā)條信息）給你女朋友，然后你女朋友回家，回家的動(dòng)作是函數(shù)a。她必須先回到家以后，函數(shù)a的內(nèi)容執(zhí)行完了，再執(zhí)行函數(shù)b，然后你就收到一條信息了。

這里必須清楚一點(diǎn)：函數(shù)b是你以參數(shù)形式傳給函數(shù)a的，那么函數(shù)b就叫回調(diào)函數(shù)。

也許有人有疑問了:一定要以參數(shù)形式傳過去嗎，我不可以直接在函數(shù)a里面調(diào)用函數(shù)b嗎？確實(shí)可以。求解中。

<解惑:如果你直接在函數(shù)a里調(diào)用的話，那么這個(gè)回調(diào)函數(shù)就被限制死了。但是使用函數(shù)做參數(shù)就有下面的好處：當(dāng)你a(b)的時(shí)候函數(shù)b就成了回調(diào)函數(shù)，而你還可以a(c)這個(gè)時(shí)候，函數(shù)c就成了回調(diào)函數(shù)。如果你寫成了function a(){...;b();}就失去了變量的靈活性。>

下面用代碼來證實(shí)我的理解。

  

  



  

學(xué)習(xí)js回調(diào)函數(shù)
click me
應(yīng)該能看到調(diào)用了兩個(gè)回調(diào)函數(shù)

  

前言：2013年11月20日

在Javascript中，函數(shù)是第一類對(duì)象，這意味著函數(shù)可以像對(duì)象一樣按照第一類管理被使用。既然函數(shù)實(shí)際上是對(duì)象：它們能被“存儲(chǔ)”在變量中，能作為函數(shù)參數(shù)被傳遞，能在函數(shù)中被創(chuàng)建，能從函數(shù)中返回。

因?yàn)楹瘮?shù)是第一類對(duì)象，我們可以在Javascript使用回調(diào)函數(shù)。在下面的文章中，我們將學(xué)到關(guān)于回調(diào)函數(shù)的方方面面?；卣{(diào)函數(shù)可能是在Javascript中使用最多的函數(shù)式編程技巧，雖然在字面上看起來它們一直一小段Javascript或者jQuery代碼，但是對(duì)于許多開發(fā)者來說它任然是一個(gè)謎。在閱讀本文之后你能了解怎樣使用回調(diào)函數(shù)。

回調(diào)函數(shù)是從一個(gè)叫函數(shù)式編程的編程范式中衍生出來的概念。簡(jiǎn)單來說，函數(shù)式編程就是使用函數(shù)作為變量。函數(shù)式編程過去 - 甚至是現(xiàn)在，依舊沒有被廣泛使用 - 它過去常被看做是那些受過特許訓(xùn)練的，大師級(jí)別的程序員的秘傳技巧。

幸運(yùn)的是，函數(shù)是編程的技巧現(xiàn)在已經(jīng)被充分闡明因此像我和你這樣的普通人也能去輕松使用它。函數(shù)式編程中的一個(gè)主要技巧就是回調(diào)函數(shù)。在后面內(nèi)容中你會(huì)發(fā)現(xiàn)實(shí)現(xiàn)回調(diào)函數(shù)其實(shí)就和普通函數(shù)傳參一樣簡(jiǎn)單。這個(gè)技巧是如此的簡(jiǎn)單以致于我常常感到很奇怪為什么它經(jīng)常被包含在講述Javascript高級(jí)技巧的章節(jié)中。

什么是回調(diào)或者高階函數(shù)

一個(gè)回調(diào)函數(shù)，也被稱為高階函數(shù)，是一個(gè)被作為參數(shù)傳遞給另一個(gè)函數(shù)（在這里我們把另一個(gè)函數(shù)叫做“otherFunction”）的函數(shù)，回調(diào)函數(shù)在otherFunction中被調(diào)用。一個(gè)回調(diào)函數(shù)本質(zhì)上是一種編程模式（為一個(gè)常見問題創(chuàng)建的解決方案），因此，使用回調(diào)函數(shù)也叫做回調(diào)模式。

下面是一個(gè)在jQuery中使用回調(diào)函數(shù)簡(jiǎn)單普遍的例子：

/注意到click方法中是一個(gè)函數(shù)而不是一個(gè)變量

//它就是回調(diào)函數(shù)
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});   

正如你在前面的例子中看到的，我們將一個(gè)函數(shù)作為參數(shù)傳遞給了click方法。click方法會(huì)調(diào)用（或者執(zhí)行）我們傳遞給它的函數(shù)。這是Javascript中回調(diào)函數(shù)的典型用法，它在jQuery中廣泛被使用。

下面是另一個(gè)Javascript中典型的回調(diào)函數(shù)的例子：

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

再一次，注意到我們講一個(gè)匿名函數(shù)（沒有名字的函數(shù)）作為參數(shù)傳遞給了forEach方法。

到目前為止，我們將匿名函數(shù)作為參數(shù)傳遞給了另一個(gè)函數(shù)或方法。在我們看更多的實(shí)際例子和編寫我們自己的回調(diào)函數(shù)之前，先來理解回調(diào)函數(shù)是怎樣運(yùn)作的。

回調(diào)函數(shù)是怎樣運(yùn)作的？

因?yàn)楹瘮?shù)在Javascript中是第一類對(duì)象，我們像對(duì)待對(duì)象一樣對(duì)待函數(shù)，因此我們能像傳遞變量一樣傳遞函數(shù)，在函數(shù)中返回函數(shù)，在其他函數(shù)中使用函數(shù)。當(dāng)我們將一個(gè)回調(diào)函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)是，我們僅僅傳遞了函數(shù)定義。我們并沒有在參數(shù)中執(zhí)行函數(shù)。我們并不傳遞像我們平時(shí)執(zhí)行函數(shù)一樣帶有一對(duì)執(zhí)行小括號(hào)()的函數(shù)。

需要注意的很重要的一點(diǎn)是回調(diào)函數(shù)并不會(huì)馬上被執(zhí)行。它會(huì)在包含它的函數(shù)內(nèi)的某個(gè)特定時(shí)間點(diǎn)被“回調(diào)”（就像它的名字一樣）。因此，即使第一個(gè)jQuery的例子如下所示：

//匿名函數(shù)不會(huì)再參數(shù)中被執(zhí)行
//這是一個(gè)回調(diào)函數(shù)    
$("#btn_1").click(function(){
    alert("Btn 1 Clicked");
});

這個(gè)匿名函數(shù)稍后會(huì)在函數(shù)體內(nèi)被調(diào)用。即使有名字，它依然在包含它的函數(shù)內(nèi)通過arguments對(duì)象獲取。

回調(diào)函數(shù)是閉包

都能夠我們將一個(gè)毀掉函數(shù)作為變量傳遞給另一個(gè)函數(shù)時(shí)，這個(gè)毀掉函數(shù)在包含它的函數(shù)內(nèi)的某一點(diǎn)執(zhí)行，就好像這個(gè)回調(diào)函數(shù)是在包含它的函數(shù)中定義的一樣。這意味著回調(diào)函數(shù)本質(zhì)上是一個(gè)閉包。

正如我們所知，閉包能夠進(jìn)入包含它的函數(shù)的作用域，因此回調(diào)函數(shù)能獲取包含它的函數(shù)中的變量，以及全局作用域中的變量。

實(shí)現(xiàn)回調(diào)函數(shù)的基本原理

回調(diào)函數(shù)并不復(fù)雜，但是在我們開始創(chuàng)建并使用毀掉函數(shù)之前，我們應(yīng)該熟悉幾個(gè)實(shí)現(xiàn)回調(diào)函數(shù)的基本原理。

使用命名或匿名函數(shù)作為回調(diào)

在前面的jQuery例子以及forEach的例子中，我們使用了再參數(shù)位置定義的匿名函數(shù)作為回調(diào)函數(shù)。這是在回調(diào)函數(shù)使用中的一種普遍的魔術(shù)。另一種常見的模式是定義一個(gè)命名函數(shù)并將函數(shù)名作為變量傳遞給函數(shù)。比如下面的例子：

//全局變量
var allUserData = [];

//普通的logStuff函數(shù)，將內(nèi)容打印到控制臺(tái)     
function logStuff (userData){
    if ( typeof userData === "string")
    {
        console.log(userData);
    }
    else if ( typeof userData === "object"){
        for(var item in userData){
            console.log(item + ": " + userData[item]);
        }
    }
} 

//一個(gè)接收兩個(gè)參數(shù)的函數(shù)，后面一個(gè)是回調(diào)函數(shù)     
function getInput (options, callback){
    allUserData.push(options);
    callback(options);
}

//當(dāng)我們調(diào)用getInput函數(shù)時(shí)，我們將logStuff作為一個(gè)參數(shù)傳遞給它     
//因此logStuff將會(huì)在getInput函數(shù)內(nèi)被回調(diào)（或者執(zhí)行）     
getInput({name:"Rich",speciality:"Javascript"}, logStuff);
//name:Rich
//speciality:Javascript

傳遞參數(shù)給回調(diào)函數(shù)

既然回調(diào)函數(shù)在執(zhí)行時(shí)僅僅是一個(gè)普通函數(shù)，我們就能給它傳遞參數(shù)。我們能夠傳遞任何包含它的函數(shù)的屬性（或者全局書訊給）作為回調(diào)函數(shù)的參數(shù)。在前面的例子中，我們將options作為一個(gè)參數(shù)傳遞給了毀掉函數(shù)。現(xiàn)在我們傳遞一個(gè)全局變量和一個(gè)本地變量：

//全局變量
var generalLastName = "Cliton"；

function getInput (options, callback){
    allUserData.push (options);
    //將全局變量generalLastName傳遞給回調(diào)函數(shù)
    callback(generalLastName,options);
}

在執(zhí)行之前確保回調(diào)函數(shù)是一個(gè)函數(shù)

在調(diào)用之前檢查作為參數(shù)被傳遞的回調(diào)函數(shù)確實(shí)是一個(gè)函數(shù)，這樣的做法是明智的。同時(shí)，這也是一個(gè)實(shí)現(xiàn)條件回調(diào)函數(shù)的最佳時(shí)間。

我們來重構(gòu)上面例子中的getInput函數(shù)來確保檢查是恰當(dāng)?shù)摹?/p>

function getInput(options, callback){
    allUserData.push(options);    

    //確保callback是一個(gè)函數(shù)    
    if(typeof callback === "function"){
        //調(diào)用它，既然我們已經(jīng)確定了它是可調(diào)用的
          callback(options);
    }
}

如果沒有適當(dāng)?shù)臋z查，如果getInput的參數(shù)中沒有一個(gè)回調(diào)函數(shù)或者傳遞的回調(diào)函數(shù)事實(shí)上并不是一個(gè)函數(shù)，我們的代碼將會(huì)導(dǎo)致運(yùn)行錯(cuò)誤。

使用this對(duì)象的方法作為回調(diào)函數(shù)時(shí)的問題

當(dāng)回調(diào)函數(shù)是一個(gè)this對(duì)象的方法時(shí)，我們必須改變執(zhí)行回調(diào)函數(shù)的方法來保證this對(duì)象的上下文。否則如果回調(diào)函數(shù)被傳遞給一個(gè)全局函數(shù)，this對(duì)象要么指向全局window對(duì)象（在瀏覽器中）。要么指向包含方法的對(duì)象。
我們?cè)谙旅娴拇a中說明：

//定義一個(gè)擁有一些屬性和一個(gè)方法的對(duì)象 //我們接著將會(huì)把方法作為回調(diào)函數(shù)傳遞給另一個(gè)函數(shù)
var clientData = {
    id: 094545,
    fullName "Not Set",
    //setUsrName是一個(gè)在clientData對(duì)象中的方法
    setUserName: fucntion (firstName, lastName){
        //這指向了對(duì)象中的fullName屬性
        this.fullName = firstName + " " + lastName;
    }
} 

function getUserInput(firstName, lastName, callback){
    //在這做些什么來確認(rèn)firstName/lastName

    //現(xiàn)在存儲(chǔ)names
    callback(firstName, lastName);
}

在下面你的代碼例子中，當(dāng)clientData.setUsername被執(zhí)行時(shí)，this.fullName并沒有設(shè)置clientData對(duì)象中的fullName屬性。相反，它將設(shè)置window對(duì)象中的fullName屬性，因?yàn)間etUserInput是一個(gè)全局函數(shù)。這是因?yàn)槿趾瘮?shù)中的this對(duì)象指向window對(duì)象。

 getUserInput("Barack","Obama",clientData.setUserName);

console.log(clientData,fullName);  //Not Set

//fullName屬性將在window對(duì)象中被初始化     
console.log(window.fullName);  //Barack Obama 

使用Call和Apply函數(shù)來保存this

我們可以使用Call或者Apply函數(shù)來修復(fù)上面你的問題。到目前為止，我們知道了每個(gè)Javascript中的函數(shù)都有兩個(gè)方法:Call 和 Apply。這些方法被用來設(shè)置函數(shù)內(nèi)部的this對(duì)象以及給此函數(shù)傳遞變量。

call接收的第一個(gè)參數(shù)為被用來在函數(shù)內(nèi)部當(dāng)做this的對(duì)象，傳遞給函數(shù)的參數(shù)被挨個(gè)傳遞（當(dāng)然使用逗號(hào)分開）。Apply函數(shù)的第一個(gè)參數(shù)也是在函數(shù)內(nèi)部作為this的對(duì)象，然而最后一個(gè)參數(shù)確是傳遞給函數(shù)的值的數(shù)組。

聽起來很復(fù)雜，那么我們來看看使用Apply和Call有多么的簡(jiǎn)單。為了修復(fù)前面例子的問題，我將在下面你的例子中使用Apply函數(shù)：

//注意到我們?cè)黾恿诵碌膮?shù)作為回調(diào)對(duì)象，叫做“callbackObj”
function getUserInput(firstName, lastName, callback. callbackObj){
        //在這里做些什么來確認(rèn)名字

        callback.apply(callbackObj, [firstName, lastName]);
}

使用Apply函數(shù)正確設(shè)置了this對(duì)象，我們現(xiàn)在正確的執(zhí)行了callback并在clientData對(duì)象中正確設(shè)置了fullName屬性：

    //我們將clientData.setUserName方法和clientData對(duì)象作為參數(shù)，clientData對(duì)象會(huì)被Apply方法使用來設(shè)置this對(duì)象     
 getUserInput("Barack", "Obama", clientData.setUserName, clientData);

//clientData中的fullName屬性被正確的設(shè)置
console.log(clientUser.fullName); //Barack Obama

我們也可以使用Call函數(shù)，但是在這個(gè)例子中我們使用Apply函數(shù)。

允許多重回調(diào)函數(shù)

我們可以將不止一個(gè)的回調(diào)函數(shù)作為參數(shù)傳遞給一個(gè)函數(shù)，就像我們能夠傳遞不止一個(gè)變量一樣。這里有一個(gè)關(guān)于jQuery中AJAX的例子：

function successCallback(){
    //在發(fā)送之前做點(diǎn)什么
}     

function successCallback(){
  //在信息被成功接收之后做點(diǎn)什么
}

function completeCallback(){
  //在完成之后做點(diǎn)什么
}

function errorCallback(){
    //當(dāng)錯(cuò)誤發(fā)生時(shí)做點(diǎn)什么
}

$.ajax({
    url:"http://fiddle.jshell.net/favicon.png",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback

});

“回調(diào)地獄”問題以及解決方案

在執(zhí)行異步代碼時(shí)，無論以什么順序簡(jiǎn)單的執(zhí)行代碼，經(jīng)常情況會(huì)變成許多層級(jí)的回調(diào)函數(shù)堆積以致代碼變成下面的情形。這些雜亂無章的代碼叫做回調(diào)地獄因?yàn)榛卣{(diào)太多而使看懂代碼變得非常困難。我從node-mongodb-native，一個(gè)適用于Node.js的MongoDB驅(qū)動(dòng)中拿來了一個(gè)例子。這段位于下方的代碼將會(huì)充分說明回調(diào)地獄：

 var p_client = new Db("integration_tests_20", new Server("127.0.0.1", 27017, {}), {"pk":CustomPKFactory});
    p_client.open(function(err, p_client) {
        p_client.dropDatabase(function(err, done) {
            p_client.createCollection("test_custom_key", function(err, collection) {
                collection.insert({"a":1}, function(err, docs) {
                    collection.find({"_id":new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
                        cursor.toArray(function(err, items) {
                            test.assertEquals(1, items.length);

                            // Let"s close the db
                            p_client.close();
                        });
                    });
                });
            });
        });
    });

你應(yīng)該不想在你的代碼中遇到這樣的問題，當(dāng)你當(dāng)你遇到了-你將會(huì)是不是的遇到這種情況-這里有關(guān)于這個(gè)問題的兩種解決方案。

給你的函數(shù)命名并傳遞它們的名字作為回調(diào)函數(shù)，而不是主函數(shù)的參數(shù)中定義匿名函數(shù)。
模塊化L將你的代碼分隔到模塊中，這樣你就可以到處一塊代碼來完成特定的工作。然后你可以在你的巨型應(yīng)用中導(dǎo)入模塊。

創(chuàng)建你自己的回調(diào)函數(shù)

既然你已經(jīng)完全理解了關(guān)于Javascript中回調(diào)函數(shù)的一切（我認(rèn)為你已經(jīng)理解了，如果沒有那么快速的重讀以便），你看到了使用回調(diào)函數(shù)是如此的簡(jiǎn)單而強(qiáng)大，你應(yīng)該查看你的代碼看看有沒有能使用回調(diào)函數(shù)的地方?；卣{(diào)函數(shù)將在以下幾個(gè)方面幫助你：

避免重復(fù)代碼（DRY-不要重復(fù)你自己）

在你擁有更多多功能函數(shù)的地方實(shí)現(xiàn)更好的抽象（依然能保持所有功能）

讓代碼具有更好的可維護(hù)性

使代碼更容易閱讀

編寫更多特定功能的函數(shù)

創(chuàng)建你的回調(diào)函數(shù)非常簡(jiǎn)單。在下面的例子中，我將創(chuàng)建一個(gè)函數(shù)完成以下工作：讀取用戶信息，用數(shù)據(jù)創(chuàng)建一首通用的詩，并且歡迎用戶。這本來是個(gè)非常復(fù)雜的函數(shù)因?yàn)樗芏鄆f/else語句并且，它將在調(diào)用那些用戶數(shù)據(jù)需要的功能方面有諸多限制和不兼容性。

相反，我用回調(diào)函數(shù)實(shí)現(xiàn)了添加功能，這樣一來獲取用戶信息的主函數(shù)便可以通過簡(jiǎn)單的將用戶全名和性別作為參數(shù)傳遞給回調(diào)函數(shù)并執(zhí)行來完成任何任務(wù)。

簡(jiǎn)單來講，getUserInput函數(shù)是多功能的：它能執(zhí)行具有無種功能的回調(diào)函數(shù)。

//首先，創(chuàng)建通用詩的生成函數(shù)；它將作為下面的getUserInput函數(shù)的回調(diào)函數(shù)
   function genericPoemMaker(name, gender) {
        console.log(name + " is finer than fine wine.");
        console.log("Altruistic and noble for the modern time.");
        console.log("Always admirably adorned with the latest style.");
        console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
    }

        //callback，參數(shù)的最后一項(xiàng)，將會(huì)是我們?cè)谏厦娑x的genericPoemMaker函數(shù)
        function getUserInput(firstName, lastName, gender, callback) {
            var fullName = firstName + " " + lastName;

            // Make sure the callback is a function
            if (typeof callback === "function") {
            // Execute the callback function and pass the parameters to it
            callback(fullName, gender);
            }
        }    



調(diào)用getUserInput函數(shù)并將genericPoemMaker函數(shù)作為回調(diào)函數(shù)：   

    getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
    // 輸出
    /* Michael Fassbender is finer than fine wine.
    Altruistic and noble for the modern time.
    Always admirably adorned with the latest style.
    A Man of unfortunate tragedies who still manages a perpetual smile.
    */
    

因?yàn)間etUserInput函數(shù)僅僅只負(fù)責(zé)提取數(shù)據(jù)，我們可以把任意回調(diào)函數(shù)傳遞給它。例如，我們可以傳遞一個(gè)greetUser函數(shù)：

function greetUser(customerName, sex)  {
   var salutation  = sex && sex === "Man" ? "Mr." : "Ms.";
  console.log("Hello, " + salutation + " " + customerName);
}

// 將greetUser作為一個(gè)回調(diào)函數(shù)
getUserInput("Bill", "Gates", "Man", greetUser);

// 這里是輸出
Hello, Mr. Bill Gates

我們調(diào)用了完全相同的getUserInput函數(shù)，但是這次完成了一個(gè)完全不同的任務(wù)。

正如你所見，回調(diào)函數(shù)很神奇。即使前面的例子相對(duì)簡(jiǎn)單，想象一下能節(jié)省多少工作量，你的代碼將會(huì)變得更加的抽象，這一切只需要你開始使用毀掉函數(shù)。大膽的去使用吧。

在Javascript編程中回調(diào)函數(shù)經(jīng)常以幾種方式被使用，尤其是在現(xiàn)代web應(yīng)用開發(fā)以及庫和框架中：

異步調(diào)用（例如讀取文件，進(jìn)行HTTP請(qǐng)求，等等）
時(shí)間監(jiān)聽器/處理器
setTimeout和setInterval方法
一般情況：精簡(jiǎn)代碼

結(jié)束語
Javascript回調(diào)函數(shù)非常美妙且功能強(qiáng)大，它們?yōu)槟愕膚eb應(yīng)用和代碼提供了諸多好處。你應(yīng)該在有需求時(shí)使用它；或者為了代碼的抽象性，可維護(hù)性以及可讀性而使用回調(diào)函數(shù)來重構(gòu)你的代碼。