什麼是 Callback Function?

簡介

Callback Function，又稱回呼函式，簡單來說，就是在一支函式執行完後，才要執行的函式。

在 ES6 中的 Promise 語法還未能使用前，就很常使用 Callback function 來接收非同步的資料。

例如一支函式First()，在執行結束才執行Second()，這個Second()就是一支Callback Function。

舉例來說

程式碼

var First = function (callback) {
console.log("First");
callback();
};
var Second = function () {
console.log("Second");
};
First(Second); //呼叫Second()

輸出：

跟下面這段程式是相同的。

程式碼

var First = function () {
 console.log("First");
};
var Second = function () {
 console.log("Second");
};

輸出：

但是，如果是以下的情況就不同了。

非同步處理 Asynchronous

原本First()中直接印出First文字的工作，改交給setTimeout()這個非同步(Asynchronous)程式處理。

setTimeout()的第一個參數為時間到時要被執行的程式，第二個參數為要延遲的時間（毫秒）。

var First = function () {
setTimeout(function () {
  console.log("First");
}, 3000); // 非同步，3秒後才執行
};
var Second = function () {
console.log("Second");
};
First();
Second();

輸出：

為什麼Second會出現在First上面?

因為setTimeout()是非同步，所以下面的Second()不須等待First()執行完就會先被執行了。

所以為了確保Second()，要在First()中的setTimeout()後執行。

我們可以將Second()做為callback函式以參數傳入First()。

var First = function (callback) {
setTimeout(function () {
  console.log("First");
  callback(); //在印出First之後，才印出Second
}, 3000); 
};
var Second = function () {
console.log("Second");
};
First(Second);