"I will call back later!"
回调是作为参数传递给另一个函数的函数
该技术允许一个函数调用另一个函数
回调函数可以在另一个函数完成后运行
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);
上面第一个示例的问题是您必须调用两个函数来显示结果。
第二个示例的问题是您无法阻止计算器函数显示结果。
现在是时候引入回调了。
回调是作为参数传递给另一个函数的函数。
使用回调,您可以调用计算器函数(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
是一个称为a回调函数。
它被传递到myCalculator()
作为实参。
当您将函数作为参数传递时,请记住不要使用括号。
右:myCalculator(5, 5, myDisplayer);
错误的:myCalculator(5, 5, myDisplayer());
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
亲自试一试 »
在上面的例子中,(x) => x >= 0
是一个回调函数。
它被传递到removeNeg()
作为实参。
上面的例子并不是很令人兴奋。
它们被简化以教您回调语法。
回调真正发挥作用的是异步函数,其中一个函数必须等待另一个函数(例如等待文件加载)。
异步函数将在下一章介绍。
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!