玩轉JavaScript Callback函數

若是你對Jquery沒有足夠的經驗，可是你又用過JQuery，這麼來講沒你已經用過了回調函數了。可是你可能不知道它是如何工做和實現的。
這篇文章主要基於我所瞭解的回調函數，我試圖啓發你們基於最常規的JavaScript技術之上。也許一些Javascript的專家能夠告訴我那些遺漏了。

什麼是回調函數？

  下面是維基百科文章定義的回調函數：
"A reference to executable code, or a piece of executable code, that is passed as an argument to other code."
下面是一段你們都熟悉的JQuery代碼:
$('#element').fadeIn('slow', function() {  
    // callback function  
});  
  這裏是調用了JQuery裏的fadeIn()方法，這個方法接受兩個參數：淡入的速度和一個可選的回調方法。
在這個回調函數裏你能夠作任何你想幹的事。當fadeIn()方法執行完後，回調函數會被執行。你能夠經過傳入
第一個參數的值來延遲迴調函數的執行。

如何寫回調函數？
  若是本身在寫一個方法或函數，你有可能會遇到須要一個回調函數。下面就是一個簡單的常見回調函數例子：
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    callback();  
}  
  
mySandwich('ham', 'cheese', function() {  
    alert('Finished eating my sandwich.');  
});  

咱們有一個叫mySandwich的函數，它接受三個參數。第三個參數就是回調函數。當執行這個方法的時候，它會彈出
一個對話框，而後才執行回調函數。注意這裏第三個參數是一段函數聲明，這段聲明在mySandwich裏面被執行。
這個參數就是回調函數。
這個回調函數是定義在第三個參數被傳入的，並且裏面有一個alert來告訴這個函數被執行了。你能夠看到下面這個例子，讓一個函數做爲傳入，這使回調成爲可能。例子a JSBin

讓回調函數成爲可選？
  有一件事也許你們都知道，就是JQuery中的回調函數都是可選的，這就意味着若是一個方法接受回調函數，
當咱們不傳值給這個回調函數，它應該不會報錯。可是在咱們的下面例子裏，若是沒有傳參：
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    callback();  
}  
  
mySandwich('ham', 'cheese');  

控制檯會報錯：「undefined is not a function」 。爲了讓它不報錯就有以下代碼：
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    if (callback) {  
        callback();  
    }  
}  
  
mySandwich('ham', 'cheese');  

如今咱們檢測了回調函數是否傳入了，就不會報錯了

讓回調函數必須是一個Function？
若是你想讓第三個參數不管如何都要傳一個Functon，能夠按下方法實現：

function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    if (callback && typeof(callback) === "function") {  
        callback();  
    }  
}  
  
mySandwich('ham', 'cheese', 'vegetables');  

注意這裏用到typeof運算符，來確保傳入值是一個方法，若是不是就會拋異常，這裏有一個例子Here’s a JSBin

對於延時的注意
儘管回調函數老是最後被執行，但這不老是這樣的。舉個例子，若是含有回調函數裏有一個異步的方法調用（AJAX or an animation）,這時候回調會在異步方法調用後執行，但也可能在異步方法返回以前返回。下面就是一個JQuery animate例子：
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    
    $('#sandwich').animate({  
        opacity: 0  
    }, 5000, function() {  
        // Animation complete.  
    });  
    
    if (callback && typeof(callback) === "function") {  
        callback();  
    }  
}  
  
mySandwich('ham', 'cheese', function() {   
    alert('Finished eating my sandwich.');  
});  
儘管回調在異步函數調用以後執行，可是在異步函數返回以前，回調函數就已經結束了。爲了解決這種問題，我建議把回調
函數放入animate的回調函數裏面。雖然這不能覆蓋全部的方法，可是回調函數最基本的意義就在於最後執行。