[想试试看JavaScript ] 讲了好几天的 callback，callback function 是什麽呢？

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 的结果罗！