JavaScript 回调
JavaScript 回调
"I will call back later!"
回调 (callback) 是作为参数传递给另一个函数的函数
这种技术允许函数调用另一个函数
回调函数可以在另一个函数完成后运行
函数序列
JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。
此例最终将显示 "Goodbye"：
示例代码：
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数序列</h2>
<p>JavaScript 函数按照它们被调用的顺序执行。</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
运行结果：
Javascript 函数序列 Javascript 函数按照它们被调用的顺序执行。 Goodbye
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例子最终会显示 "Hello"：
示例代码：
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数序列</h2>
<p>JavaScript 函数按照它们被调用的顺序执行。</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
运行结果：
Javascript 函数序列 Javascript 函数按照它们被调用的顺序执行。 Hello
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
顺序控制
有时您希望更好地控制何时执行函数。
假设您要进行计算，然后显示结果。
您可以调用计算器函数 (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);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>进行计算，然后显示结果。</p>
<p id="demo"></p>
<script>
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);
</script>
</body>
</html>
运行结果：
Javascript 函数 进行计算，然后显示结果。 10
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
或者，您可以调用计算器函数 (myCalculator)，并让计算器函数调用显示函数 (myDisplayer)：
示例代码：
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 回调</h2>
<p>进行计算，然后显示结果。</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
运行结果：
Javascript 回调 进行计算，然后显示结果。 10
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
上面第一个例子的问题是你必须调用两个函数来显示结果。
第二个例子的问题是您无法阻止计算器函数显示结果。
现在是引入回调的时候了。
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);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 回调</h1>
<p>进行计算，然后显示结果。</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
运行结果：
Javascript 回调 进行计算，然后显示结果。 10
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在上面的例子中， myDisplayer 是函数的名称。
它作为参数传递给 myCalculator()。
当您将函数作为参数传递时，请记住不要使用括号。
正确：myCalculator(5, 5, myDisplayer);
错误：myCalculator(5, 5, myDisplayer());
何时使用回调？
上面的例子并不是很令人兴奋。
它们经过简化了，为的是向您讲解回调的语法。
回调真正闪光之处是异步函数，其中一个函数必须等待另一个函数（例如等待文件加载）。
下一章将介绍异步函数。
