JavaScript：什么是回调？

翻译练习

原博客地址：JavaScript: What the heck is a Callback?

在6分钟内经过简单的例子学习和理解回调的基本原理。

什么是回调？

简单地说：回调就是一个在另外一个函数执行完成后再去执行的函数--所以得名回调。

复杂点讲：在JavaScript中，函数是对象。所以，函数能够把其余函数当作参数，也能够被其余函数返回。这样作的函数称为高阶函数。任何被当作参数传递的函数都叫回调函数。

上面已经讲了不少，让咱们经过一些例子把这些去细化一下。

为何咱们须要回调？

有一条很是重要的缘由：JavaScript是一门事件驱动的语言。这意味着，JavaScript在监听其余事件的同时会继续执行，而不是在继续执行以前去等待响应。

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

正如你指望的那样，函数first会首先执行，函数second会接着执行--控制台打印以下：

// 1
// 2

目前看来一切良好。

可是，若是函数first包含一些不会当即执行的代码会发生什么呢？好比说，一个API请求，咱们必须去发送请求而后等待响应吗？为了模拟这种动做，咱们使用setTimeout--在JavaScript中，这个函数将会在设定的一段时间后去调用一个函数。咱们来把咱们的函数延迟500ms去模拟一个API请求。咱们的新代码像下面这样：

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

如今你理不理解setTimeout()怎么工做的并不重要。如今最重要的是，你看咱们把console.log(1);移动到500ms的延时中。那么，咱们如今执行代码会发生什么呢？

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('math');
// Alerts: Starting my math homework.

如今，让咱们来添加回调--做为doHomework()函数的最后一个参数，咱们能够传入回调。随后，在咱们调用doHomework()时，回调函数被定义为它的第二个参数。

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

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

如你所见，若是你在控制台输入上面的代码，你会连续收到两次警告：先是“starting homework”，再是“finished homework”。

可是回调函数并非必须在咱们的函数调用中定义，它们能够向下面这样在其余地方被定义：

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

这个例子的结果和上一个的如出一辙，可是设置却有一点区别。咱们在调用doHomework()的时候，把函数定义alertFinished 做为参数传给了它。

现实世界的例子

上周我发布了一篇文章，这篇文章中代码运行的惟一缘由就是Twitters 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发起一个get请求。
• 在search/tweets请求中有三个参数，分别是：请求的路由、查询的参数param和咱们的回调--一个匿名函数。

回调在这里很重要，由于在运行到后面的代码以前，咱们须要先从服务器获取到响应。咱们不知道在咱们讲参数经过get请求发送到search/tweets 后咱们的API请求成功与否，咱们只能等着。一旦Twitter作出响应，咱们的回调函数就会被调用。Twitter要么返回一个错误信息给咱们，或者返回响应对象给咱们。在咱们的回调函数中，咱们能够经过if()语句去肯定咱们的请求是成功了仍是失败了，而后相应地对新数据作出处理。

你作到了

干得不错。理想状况下，你如今已经理解了什么是回调还有它是怎么工做的。这仅仅是回调的冰山一角，还有不少你须要去学习。我每周会发布了一些文章/教程，若是你想被加入到个人once-weekly邮箱列表，在这里了输入你的邮箱吧。