[JS奇怪的世界]No.41 閉包與回呼

發表於 更新於 分類於
前面講完了閉包、一級函數等等，說真的就跟課程老師講的一樣，腦袋快有點爆炸了，所以這邊只延續上一章節的的相關資訊做延伸，一般來講如果我們在 JavaScript 使用過 setTimeout、jQuery，這些其實都是使用了閉包，所以這章節要來聊聊閉包和回呼 (callback)。

前言

前面講完了閉包、一級函數等等，說真的就跟課程老師講的一樣，腦袋快有點爆炸了，所以這邊只延續上一章節的的相關資訊做延伸，一般來講如果我們在 JavaScript 使用過 setTimeout、jQuery，這些其實都是使用了閉包，所以這章節要來聊聊閉包和回呼 (callback)。

閉包與回呼

首先我們先試著建立一個簡單的函數範例 ↓

1
2
3
4
5
6
function sayHiLater() {
  var greeting = 'Hi';
  setTimeout(function() {
    console.log(greeting);
  }, 3000);
}

這個範例我們都知道會在三秒後出現 Hi，而這個過程其實我們已經使用了函數表示式及閉包。

而 jQuery 也是一樣，例如 click 事件。

1
2
3
$('button').click(function () {
  ...
});

另外這也是一個閉包，從上面這兩個範例我們有可能已經使用過了閉包、函數表示式及一級函數。

閉包

而回呼函數是當某個函數執行完你給他的執行函數，然後那個函數再回呼你給他的函數，在白話一點就是當某個函數執行完畢要給該函數執行的函數就稱為回呼。

讓我們從範例來看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function tellMeWhenDone(callback) {
  var a = 1000;
  var b = 2000;
  //當結束時呼叫另一個函數
  callback();
}

tellMeWhenDone(function() {
  console.log('做完了!');
})

tellMeWhenDone(function() {
  console.log('我還在做');
})

callback

我們可以看到呼叫了兩次 tellMeWhenDone，然後參數 function 帶入 callback，當 tellMeWhenDone 執行完之後就會呼叫剛剛帶入的函數，這就是回呼。

callback

簡單來講就是 function 執行完畢後在執行另一個。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分