callback function

callback function 也叫回呼函式
Callback 就是把函式當作另一個函式的參數。

聽起來很奇怪，其實使用 setTimeout() 就有這樣使用。

setTimeout( function(){console.log("Hello world");} , 1000 )

setTimeout() 裡面有兩個參數。

第一個參數放要執行的程式，也就是 function(){console.log("Hello world");}

第二個參數放要延遲幾秒鐘之後執行，單位是千分之一秒( milliseconds )。
所以輸入 1000 的話就是延遲一秒。

那麼什麼時候會使用 Callback 呢?

主要會使用 Callback 是為了處理非同步的程式( Asynchronous )的問題

我想要做個加法的程式，並且我希望他能延後幾秒再做加法，
所以我寫了：

function delayAdd(n1,n2,delayTime){
    setTimeout(function(){
        return n1+n2;
    },delayTime)
}

接著我想把結果印出

function delayAdd(n1,n2,delayTime){
    setTimeout(function(){
        return n1+n2;
    },delayTime)
}
function test(){
    var result=delayAdd(4,5,2000)
    alert(result);
}
test();

結果 test() 印出 undefined

為什麼會這樣呢？

我們試著將程式碼改寫成這樣

function delayAdd(n1,n2,delayTime){
    setTimeout(function(){
        console.log("4");
        return n1+n2;
    },delayTime)
    console.log("1");
}
function test(){
    var result=delayAdd(4,5,2000);
    console.log("2");
    alert(result);
    console.log("3");
}
test();

瀏覽器會先印出 1
接著印出 2
接著彈跳視窗 undefined
接著印出 3
接著印出 4

我們知道 Javascript 是一行一行執行的
我們可以知道程式碼再跑的時候應該是按照下面的順序

1. 呼叫 test()
2. 進入 test() 函式內部，呼叫 delayAdd()
3. 進入 delayAdd() 函式內部，執行 console.log("1")
4. 繼續執行 test() 函式內部，執行 console.log("2")
5. 執行 alert(result)
6. 執行 console.log("3")
7. 最後執行 setTimeout() 裡面的 console.log("4")

我們可以發現 alert(result) 印出 undefined ，代表其實 delayAdd(4,5,2000) 其實只傳了一個 undefined 到 result 裡面

而且我們會發現，其實程式最後才執行 setTimeout()
所以我們還沒執行裡面的加法， alert(result) 就要把結果印出來了。

我們可以把非同步( Asynchronous )的程式，產生的問題，
簡單想成要解決程式執行順序的問題

所以我們可以利用 Callback 的方式，將函式當作參數傳到另一個函式裡面

function delayAdd(n1,n2,delayTime,callback){
setTimeout(function(){
callback(n1+n2);
    },delayTime)
}
function test(){
    delayAdd(3,4,2000,function(result){
        console.log(result);
    })
}
test();

呼叫 test() ，執行裡面的 delayAdd()
將 delayAdd() 的參數，傳到 delayAdd() 的函式裡面做計算

這樣就可以在兩秒之後，印出 3+4 的結果囉！