JavaScript 回调

回调函数作为作为参数传递到一个主函数，并在主函数内部调用该函数，一般用来在主函数执行完成后调用回调函数来完成某些任务。

函数执行顺序

JavaScript 函数按照它们被调用的顺序执行，不是按照定义的顺序执行。

如下面两个例子定义了 2 个函数，最终显示的是最后调用的函数的结果：

function myFirst() {
  myDisplayer("Hello");
}

function mySecond() {
  myDisplayer("Goodbye");
}

myFirst();
mySecond();

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，计算结果，并在 myCalculator 内部调用 myCalculator myDisplayer 显示结果：

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}

myCalculator(5, 5);

第一个例子的问题是你必须调用两个函数来显示结果。

第二个示例的问题是您无法阻止计算器功能显示结果。

现在是引入回调的时候了。

JavaScript 回调

回调函数作为参数传递给另一个函数。

通过将输出函数作为参数传递给计算器函数，在计算后执行参数指定的回调函数：

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())~~;

这样能增大程序的灵活性，你可以实现各种输出函数，比如：

输出到控制台

function myDisplayer2(some) {
  console.log(some);
}

myCalculator(5, 5, myDisplayer2);

弹出消息的提示框

function myDisplayer3(some) {
  alert(some);
}

myCalculator(5, 5, myDisplayer3);

包装消息的内容

function myDisplayer4(some) {
  document.getElementById("demo").innerHTML = "运算的结果是：" + some;
}

myCalculator(5, 5, myDisplayer4);

我们可以根据不同的场景自定义不同的输出函数，这大大提高了程序的灵活性。

何时使用回调？

上面的例子并不是很令人兴奋。

它们经过简化以教您回调语法。

回调真正闪耀的地方是异步函数，其中一个函数必须等待另一个函数执行完成后才能执行（例如等待文件加载）。

下一章将介绍异步函数。

JavaScript 回调

函数执行顺序

顺序控制

JavaScript 回调

何时使用回调？

目录