Callback Function 中文為回呼函式、回調函式，與一般的 Function 不同的地方在於呼叫時機 ，這個時機是：

當某個函式執行完後接著執行的時候。

所以也可以理解成以參數型態被傳入的函式。

例如下面 addEventListener 中的 Function：

element.addEventListener("click", function(){
  // ...
})

或是自己寫一個簡單的：

function fn(callback){
  callback() // 執行傳入的 callback
}

function callback(){
  console.log("callback!!!")
}

fn(callback) // 印出 callback!!!

為什麼要 Callback Function

我們知道 JavaScript 程式碼會一行一行往下跑，不過一旦遇到非同步行為可能會遇到意想不到的情況，為了能確保我們的任務在執行完後接著做某個 Function，我們會需要使用 Callback Function。

例如下面的範例：

function fn1(){
    console.log("fn1")
}

function fn2(){
    console.log("fn2")
}

// 照順序印出 fn1、fn2
fn1() 
fn2()

不過如果改成非同步的程式碼：

setTimeout(() => {
    console.log("fn1")
}, 1000)

function fn2(){
    console.log("fn2")
}

// 印出 fn2、接著才是 fn1
fn1() 
fn2()

所以可以知道 Callback Function 能夠確保程式碼如我們所預期的執行。

不過當 Callback Function 太巢的時候會發生回呼地獄（Callback hell）的情況，這張想必大家已經看到爛了...

避免回呼地獄的發生，我們可以使用 ES6 的 Promise 來處理，會更直觀。可以參考這系列的 Day 04 | Promise。

參考資料

• JavaScript 什麼是Callback函式 (Callback Function)？
• 重新認識 JavaScript: Day 18 Callback Function 與 IIFE
• [JavaScript] 一次搞懂同步與非同步的一切：待會叫你 — 回呼函式(Callback Function)