JavaScript 回撥
"我稍後會回電話！"
回撥函式是作為引數傳遞給另一個函式的函式
此技術允許一個函式呼叫另一個函式
回撥函式可以在另一個函式完成後執行
函式序列
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) 並傳入一個回撥函式 (myCallback)，然後讓計算器函式在計算完成後執行該回調函式
示例
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());
示例
// 建立一個數組
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// 使用回撥呼叫 removeNeg
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// 顯示結果
document.getElementById("demo").innerHTML = posNumbers;
// 只保留正數
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
自己動手試一試 »
在上面的示例中，(x) => x >= 0 是一個 **回撥函式**。
它作為 **引數** 傳遞給 removeNeg()。
何時使用回撥？
上面的例子不是很令人興奮。
它們被簡化以教您回撥語法。
回撥真正發光的地方是在非同步函式中，其中一個函式必須等待另一個函式（例如等待檔案載入）。
非同步函式將在下一章中介紹。
