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

Whien_Liou
Jul 25, 2017 · 5 min read

在電腦程式設計中,回呼函式,或簡稱回呼(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)

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

  1. callbackSleepWorker — 一個沈睡直到被呼叫時才做事情的工人
  2. 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 工人,而這次就可以順利拿到結果

I have 30

Tips

在 JavaScript 這種單線程的網頁工作環境中,很多運作機制都不像其他語言一樣可以多工去做事情,所以我們必須透過 Callback 神奇能力,來達到「被」呼叫的一個效果,在我們未來串接到許多來自外部伺服器的資料時,就必須要做很大量的 Callback function 了。

看看其他相關教學

Day — 1 基本結構 (The Structure of JavaScript), 物件 (Object)

Day — 2 變數 (Variable)

Day — 3 運算子 (Operator)

Day — 4 函數 (Function)

Day — 5 流程控制 (Flow Control)

Day — 6 視窗 (Window), 時間控制(Timer)

Day — 7 認識 HTML, 認識元件, 命名元素 (HTML)

Day — 8 事件 (Event)

Day — 9 選擇器 (Selector), 改變樣式 (Style)

Day — 10 Event 進階應用

Day — 11 CSS Style 與 JavaScript 的互動

Day — 12 龜兔賽跑

Day — 13 jQuery 引用與基本使用 (jQuery)

Day — 14 淡出與淡入 (fadeIn, fadeOut)

Day — 15 滑動效果 (SlideUp, SlideDown)

Day — 16 設置內容 (text, html) 登入流程範例

Day — 17 生活化閉包 (Clouser)

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade