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()。
何时使用回调？
上面的例子不是很令人兴奋。
它们被简化以教您回调语法。
回调真正发光的地方是在异步函数中，其中一个函数必须等待另一个函数（例如等待文件加载）。
异步函数将在下一章中介绍。
