Menu Close

什么是JavaScript 回调函数 Callback functions

JavaScript 中,函数即对象。我们可以将对象作为参数传递给函数吗?答案是“可以”。

什么是JavaScript 回调函数 Callback functions
什么是JavaScript 回调函数 Callback functions

所以,我们可以将函数作为参数传递给其他函数,在外部函数中调用它。我们看一下下面的例子:

function print(callback) {  
    callback();
}

print( ) 函数将另一个函数作为参数,并在函数体内部调用它。在 JavaScript 里,我们叫它“回调”。所以,被传递给另一个函数作为参数的函数叫作回调函数。

为什么需要回调函数?

需要回调函数的主要原因是:程序在某些时刻无法立即得到结果,需要在未来某个时间点再执行某段逻辑

简单来说,回调函数可以让代码在响应某个事件、异步操作完成、用户输入结果之后再执行具体的操作。

常见场景包括:

  • 用户交互:比如点击按钮后执行某个动作。

  • 异步处理:比如服务器返回数据后更新页面内容。

  • 灵活性和扩展性:函数接收不同的回调,可以根据不同需求执行不同的行为。

回调函数确保:函数在某个任务完成之前不运行,在任务完成之后立即运行。它帮助我们编写异步 JavaScript 代码,避免问题和错误。

JavaScript 里创建回调函数的方法是将它作为参数传递给另一个函数,然后当某个任务完成之后,立即调用它。

让我们来看更多将函数作为值传递并使用函数表达式的示例。

我们将编写一个名为 ask(question, yes, no) 的函数,带有三个参数:

  • question:问题的文本

  • yes:如果回答是“是”,执行的函数

  • no:如果回答是“否”,执行的函数

这个函数应该提出question,并根据用户的回答,调用 yes()no()

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "You agreed." );
}

function showCancel() {
  alert( "You canceled the execution." );
}

// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);

在实践中,这种函数非常有用。

现实生活中的询问与上面的例子之间的主要区别在于,现实生活中的函数使用比简单的确认框更复杂的方式与用户交互。在浏览器中,这类函数通常会显示一个漂亮的提问窗口。但那是另一个话题。

ask 函数的 showOkshowCancel 参数被称为回调函数(callback functions)或简称回调。

其思路是我们传递一个函数,并期望在必要时它能“回调”我们。在我们的例子中,showOk 是“是”答案的回调,showCancel 是“否”答案的回调。

我们可以使用函数表达式来编写一个等效的、更简短的函数:

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

这里,函数是在 ask(...) 调用中直接声明的。它们没有名字,因此被称为匿名函数(anonymous)。由于没有赋值给变量,这些函数在 ask 之外是不可访问的,但这正是我们在这里想要的效果。

这样的代码在我们的脚本中非常自然地出现,这符合 JavaScript 的风格。

什么是匿名函数?

JavaScript 里,一个没有名称的函数叫作“匿名函数”。我们可以直接在另一个函数内定义一个函数,而不是调用它,比如:

setTimeout(function() {  
    console.log("This message is shown after 3 seconds");
}, 3000);

我们可以看到,这里的回调函数没有名称。在 JavaScript 里,一个没有名称的函数叫作“匿名函数”。这个例子和上面的例子执行的任务一样。

函数是表示“动作”的值

像字符串或数字这样的常规值表示数据。

函数可以被看作是一种动作。

我们可以在变量之间传递它,并在需要时运行它。

READ  JavaScript 空值合并运算符
除教程外,本网站大部分文章来自互联网,如果有内容冒犯到你,请联系我们删除!
Posted in JavaScript 基础

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Leave the field below empty!