Understand JavaScript #17 回呼函式 (Callback Function)
本文主要內容為探討「回呼函式」的相關知識,其實我們可能已經用過回呼函式的概念了,像是 setTimeout 或是 jQuery 事件就是在使用閉包與回呼的概念喔。
閉包與回呼
- 回呼 (Callback):執行一個函式,並給它一個函式作為參數,當那個函式結束後,它會執行我們給它的函式
- 例如:我呼叫函式 A 並給它函式 B,當 A 結束後,A 會呼叫函式 B
下面是一個簡單的回呼函式,我們呼叫 tellMeWhenDone
並且給予一個函式作為參數,當 tellMeWhenDone
呼叫到 callback
時就會執行我們給的函式。
1function tellMeWhenDone(callback) { 2 var a = 1000; 3 var b = 2000; 4 5 callback(); // 回呼,執行作為參數的函式 6} 7 8tellMeWhenDone(function () { 9 console.log('I am Done!'); 10}); 11 12tellMeWhenDone(function () { 13 console.log('All Done...'); 14}); 15 16// I am Done! 17// All Done... 18
另外,其實 JavaScript 的內建函式 setTimeout 就是一個回呼函式,使用 setTimeout 就會用到函式表達式、一級函式、閉包等概念。
- 函式表達式:利用函式表達式建立函式
- 一級函式:將函式作為參數傳入
- 閉包:執行 setTimeout 的 Function 時,需要到範圍鏈上向外尋找
greeting
這個變數,因為有閉包,所以就算sayHiLater
已經結束(只花幾毫秒就執行完了,而不是 3 秒),過 3 秒後依然可以取用到greeting
1function sayHiLater() { 2 var greeting = 'Hi!'; 3 4 setTimeout(function () { 5 console.log(greeting); 6 }, 3000); 7} 8 9sayHiLater(); 10
回顧
看完這篇文章,我們到底有什麼收穫呢?藉由本文可以理解到…
- 瞭解回呼函式的概念
- 其實 JavaScript 有一些內建的函式就已經是回呼函式了!