前情提要

「咦，今天早上开始就一直感觉有人在叫我，是艾草你吗？」

艾草：「没有呀，我怎麽没听到，确定不是小精灵在叫你吗？」

「奇怪，没有呀！难不成是我幻听了？」

(发现艾草露出诡异的窃笑，与此同时看到自己身上淡淡的魔法痕迹。)

「等等，我身上这啥，给我解释唷！」

艾草：「喔，没有啦，帮你附加了一个魔法术式，专门为你订做的，只要你有什麽改变就能触动魔法唷！」

「原来我听到的声音这麽来的！你是小学生吗！！等我也学会你就完蛋了 (๑ↀᆺↀ๑)✧」

Callback Function

以下引用至 MDN：

回呼函式（callback function）是指能藉由参数（argument）通往另一个函式的函式。它会在外部函式内调用、以完成某些事情。

常见 Callback Function 案例

阵列方法

其实 Callback Function 还蛮常在不知不觉中就使用出来了，像是使用阵列方法时，以 forEach 为例：

let num = [1, 2, 3];
num.forEach(function (item, index, array) {
  console.log(item, index, array);
});

像这样将 function 包在 forEach 内做为参数使用，且无法单独呼叫该函式的情况，也是回呼函式 Callback Function 。

addEventListener

透过 addEventListener 去注册监听事件一但按钮被点击，就会去执行做为参数的函式，可以看到该函式是被动的执行，本身并无主动权，这也是一种回呼函式 Callback Function 。

const button = document.querySelector("button");
button.addEventListener("click", function(e) {
  console.log('button click')
});

setTimeout

想要延迟一段时间(时间单位为毫秒)後再去执行指定程序码时，可以透过 setTimeout 来达成， 而 setTimeout 的特点是当程序码执行到 setTimeout 时，会先跳过它，执行其他程序码，避免拖延网页载入时间，setTimeout 的写法如下：

setTimeout(function(){ console.log('Hello World') }, 1000);

上方的例子中 setTimeout 带了两个参数，分别为 Callback Function 与延迟时间，当延迟了某段时间後，才会去执行该函式。

介绍了几种常见的例子，可以观察到回呼函式 Callback Function 都是被作为参数使用，且是被动地被执行，在哪种情况下可能会需要使用 Callback Function 呢？

Callback Function 使用时机

复习一下刚刚提到，使用 setTimeout 延迟函式时，程序码执行到 setTimeout ，会先跳过它。

也因为这个特性，如果其他程序码一定要在 setTimeout 执行完成後才去执行，就会很难掌握时间。

function one() {
  setTimeout(function () {
    console.log("我是第一个想执行的函式");
  }, 0);
}
function two() {
  console.log("我是第二个想执行的函式");
}
one();
two();

印出结果：

或是有多个 setTimeout 正在执行很难确定完成顺序时，此时就可以透过 Callback Function 来解决，像这样呼叫函式 one 先将函式 two 、three 当成参数传进去後，并於函式 one 的 setTimeout 内执行 two(three); ，就可以指定多个函式间的执行顺序。

function one(two, three) {
  setTimeout(function () {
    console.log("我是第一个想执行的函式");
    two(three);
  }, 1000);
}
function two(three) {
  setTimeout(function () {
    console.log("我是第二个想执行的函式");
    three();
  }, 1000);
}
function three() {
  console.log("我是第三个想执行的函式");
}

one(two, three);

印出结果：

Callback Function 的优点在可以指定多个函式间的执行顺序，但使用 Callback Function 时也要留意避免过巢的情况，以免後续难以维护程序码。

总结

• Callback Function 指一个函式被另一个函式当成参数执行
• Callback Function 本身是被动执行
• Callback Function 常见例子有：阵列方法、addEventListener 、setTimeout
• 透过 Callback Function 可以指定多个函式间的执行顺序
• Callback Function 要避免过巢的情况

碎念时间：今天做完图後发现都会有一条红色的细线，重新下载也有QQ，明明下载前都正常呀，难不成真的是小精灵加上去的。

参考文献

https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function
0 陷阱！0 误解！8 天重新认识 JavaScript！（iT邦帮忙铁人赛系列书）
https://medium.com/appxtech/什麽是callback函式-callback-function-3a0a972d5f82