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());
何时使用回调?
上面的例子并不是很令人兴奋。
它们经过简化了,为的是向您讲解回调的语法。
回调真正闪光之处是异步函数,其中一个函数必须等待另一个函数(例如等待文件加载)。
下一章将介绍异步函数。