赛捷软件论坛's Archiver

vicky.yu 发表于 2023-1-9 15:17

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

何时使用回调?
上面的例子并不是很令人兴奋。

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

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

下一章将介绍异步函数。

JS Static
JS 异步

JavaScript 和 HTML DOM 参考手册
JavaScript 实例
JavaScript 测验
JavaScript 高级教程

W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。

使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.