javascript回调函数有什么用

这篇文章主要为大家展示了“javascript回调函数有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“javascript回调函数有什么用”这篇文章吧。

在javascript中，回调函数就是一个被作为参数传递的函数。函数A作为参数（函数引用）传递到另一个函数B中，并且这个函数B执行函数A，函数A就叫做回调函数；如果没有名称（函数表达式），就叫做匿名回调函数。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

什么是回调函数（Callback）

在JavaScript中，函数是对象。 因此，函数可以将函数作为参数，并且可以由其他函数返回。 执行此操作的函数称为高阶函数。 作为参数传递的任何函数都称为回调函数。

回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。

为什么我们需要回调？

出于一个非常重要的原因-JavaScript是一种事件驱动语言。这意味着JavaScript不会继续等待响应，而是会在侦听其他事件时继续执行。让我们看一个基本的例子：

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

如你所料，首先执行函数，然后执行第二函数，将以下内容记录到控制台：

// 1
// 2

到目前为止一切都很好。

但是，如果函数包含无法立即执行的某些代码怎么办？ 例如，我们必须先发送请求然后等待响应的API请求？ 为了模拟此动作，将使用setTimeout，它是一个JavaScript函数，将在设置的时间后调用该函数。 我们将功能延迟500毫秒以模拟API请求。 我们的新代码将如下所示：

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

现在了解setTimeout（）的工作方式并不重要。重要的是，你看到我们把console.log（1）移到500毫秒延迟内。那么，当我们调用函数时会发生什么呢？

first();
second();
// 2
// 1

即使我们先调用了first（）函数，我们在second（）函数之后才打印了它的结果。

这并不是说JavaScript没有按照我们想要的顺序执行我们的函数，而是JavaScript在继续执行second（）之前没有等待first（）的响应。

那为什么给你看这个呢？因为你不能在一个函数后调用另一个另一个函数，而又希望它们以正确的顺序执行。回调是一种确保某些代码在其他代码已经完成执行之前不会执行的方法。

创建一个回调函数

好了，话不多说，让我们创建一个回调！

首先，打开您的Chrome开发者控制台（Windows：Ctrl + Shift + J）（Mac：Cmd + Option + J），然后在控制台中键入以下函数声明：

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

现在让我们添加回调-作为doHomework（）函数中的最后一个参数，我们可以传入回调。然后在对doHomework（）的调用的第二个参数中定义回调函数。

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

可以看到，如果你在控制台中输入上述代码，则会收到两个alert：“starting homework”alert，然后是“finished homework”alert。

但是，并非总是必须在我们的函数调用中定义回调函数。它们可以在我们的代码的其他地方定义，如下所示：

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

此示例的结果与前面的示例完全相同，但是设置略有不同。我们可以看到，在doHomework（）函数调用期间，我们已将alertFinished函数定义作为参数传递。

一个真实的例子

我们尝试调用Twitter的API。 向API发出请求时，必须等待响应，然后才能对该响应采取行动。 这是真实回调的一个很好的例子。 请求长这样：

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get意味着我们正在向Twitter发送获取请求

此请求中包含三个参数：“ search / tweets”（这是我们的请求的路由），params（这是我们的搜索参数）和一个匿名函数（即我们的回调）。

回调在这里很重要，因为我们需要等待服务器的响应才能继续执行代码。 我们不知道我们的API请求是否会成功，因此在通过get请求将参数发送到search/tweets后，我们等待。 一旦Twitter响应后，将调用我们的回调函数。 Twitter会向我们发送错误（错误）对象或响应对象。 在回调函数中，我们可以使用if（）语句来确定我们的请求是否成功，然后对新数据采取相应措施。

以上是“javascript回调函数有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！