JavaScript 回調

"I will call back later!"

回調 (callback) 是作為參數傳遞給另一個函數的函數

這種技術允許函數調用另一個函數

回調函數可以在另一個函數完成后運行

函數序列

JavaScript 函數按照它們被調用的順序執行。而不是以它們被定義的順序。

此例最終將顯示 "Goodbye"：

實例

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

親自試一試

本例子最終會顯示 "Hello"：

實例

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

親自試一試

順序控制

有時您希望更好地控制何時執行函數。

假設您要進行計算，然后顯示結果。

您可以調用計算器函數 (myCalculator)，保存結果，然后調用另一個函數 (myDisplayer) 來顯示結果：

實例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);

親自試一試

或者，您可以調用計算器函數 (myCalculator)，并讓計算器函數調用顯示函數 (myDisplayer)：

實例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}
myCalculator(5, 5);

親自試一試

上面第一個例子的問題是你必須調用兩個函數來顯示結果。

第二個例子的問題是您無法阻止計算器函數顯示結果。

現在是引入回調的時候了。

JavaScript 回調

回調是作為參數傳遞給另一個函數的函數。

使用回調，您可以通過回調調用計算器函數（myCalculator），并在計算完成后讓計算器函數運行回調：

實例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

親自試一試

在上面的例子中， myDisplayer 是函數的名稱。

它作為參數傳遞給 myCalculator()。

當您將函數作為參數傳遞時，請記住不要使用括號。

正確：myCalculator(5, 5, myDisplayer);

錯誤：myCalculator(5, 5, myDisplayer());

何時使用回調？

上面的例子并不是很令人興奮。

它們經過簡化了，為的是向您講解回調的語法。

回調真正閃光之處是異步函數，其中一個函數必須等待另一個函數（例如等待文件加載）。

下一章將介紹異步函數。