JS 回调

---

顺序控制

有时您希望更好地控制何时执行函数。

假设您要进行计算，然后显示结果。

您可以调用计算器函数 (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());

---

何时使用回调?

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

它们经过简化了，为的是向您讲解回调的语法。

回调真正闪光之处是异步函数，其中一个函数必须等待另一个函数（例如等待文件加载）。

下一章将介绍异步函数。