导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

JS 教程

JS 简介 JS 如何使用 JS 输出 JS 语法 JS 语句 JS 注释 JS 变量 JS 运算符 JS 条件语句 JS 循环 JS 字符串 JS 数字 JS 函数 JS 对象 JS 日期 JS 数组 JS 类型化数组 JS 集合 JS Map 映射 JS Math JS 正则表达式 JS 数据类型 JS 错误 JS 事件 JS 编程 JS 关键字参考 JS 保留关键字参考 JS 运算符参考 JS 运算符优先级 JS UTF-8 字符 JS UTF-8 符号 JS UTF-8 表情符号 JS 版本

JS 高级教程

JS 对象 JS 函数 JS 类 JS 迭代 JS Promises JS 模块

JavaScript 回调


顺序控制

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

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

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


何时使用回调?

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

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

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

下一章将介绍异步函数。


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。