JS20min Day — 18 關於回呼生活化 (Callback)

5 min readJul 25, 2017

在電腦程式設計中，回呼函式，或簡稱回呼（Callback 即call then back 被主函式呼叫運算後會返回主函式），是指通過函式參數傳遞到其它代碼的，某一塊可執行代碼的參照。這一設計允許了底層代碼呼叫在高層定義的子程式。

Callback 可以分開來唸成「Call」「back」，呼叫？回來？這是什麼意思呢？這是一個 JavaScript 中很特別的用法，這方式允許我們把一個函數（工人）當作參數（資訊）丟到揹包中，就可以讓我們控制好程式流程與順序上的問題，什麼意思？如何使用呢？我們來認識認識。

Callback 的概念大概就是這樣

function callbackSleepWorker() {
  alert('OK, Im wake up !')
}function ICallYouWhenIDone(callbackWorker) {
  alert('OK, Im first.')
  callbackWorker()
}ICallYouWhenIDone(callbackSleepWorker)

在例子中，我們有兩個工人

callbackSleepWorker — 一個沈睡直到被呼叫時才做事情的工人
ICallYouWhenIDone — 一個先動工，然後負責呼叫沈睡的工人做事

callbackSleepWorker 這個工人負責的就是呼喊一個提示視窗說「OK, Im wake up !」也就是被叫醒做事了

iCallYouWhenIDone 這個工人是負責先開始做事情的人，第一件事情會先呼喊一個提示視窗說「OK, Im first」，做完就馬上去呼叫 callbackSleepWorker 做起床事情。

但這樣的例子，其實就跟我們直接在 ICallYouWhenIDone 裡面呼叫 callbackSleepWorker 一樣的意思是吧？其實 Callback 會用在更特別的地方，看個例子

let money = null
function slower() {
  setTimeout(function() {
    money = 30
  }, 200)
}
function faster() {
  setTimeout(function() {
    console.log('I have ' + money)
  }, 100)
}
slower()
faster()

執行過後，我們會發現按照順序先呼叫 slower 在呼叫 faster 卻不是我們要的結果，的確沒錯，得到的結果是

I have null

因為我們用了 setTimeout 來運作，就會造成呼叫後順序不一致的狀態，但這在 JavaScript 的特性來說是正常的，JavaScript 會將越快能做完或呼叫的事情先做。

所以我們如果要照原本的順序就必須要利用 Callback 的方法來幫忙，將例子改成

let money = null
function slower(callbackWorker) {
  setTimeout(function() {
    money = 30
    callbackWorker()
  }, 200)
}
function faster() {
  setTimeout(function() {
    console.log('I have ' + money)
  }, 100)
}
slower(faster)

這麼一來，我們就可以順利的按照我們的順序先呼叫 slower 工人，然後做完得到 30 元後，在呼叫 faster 工人，而這次就可以順利拿到結果