JavaScript：回调是什么鬼

By Brandon Morelli | Jun 12, 2017

原文

用六分钟经过简单的例子学习基础回调

前言

嗨，我是Brandon，我建立了codeburst.io,在上面写了关于js的教程和文章来帮助初学者深刻学习web开发。若是你有疑问，能够给我留言，或关注个人twitter brandonmorelli.

什么是回调

简单地说：回调是一个函数执行完后紧接着才会被执行的函数——所以被称为函数。

详细地说：在js中，函数是Objects。正由于如此，函数能作为参数传给另外一个函数，也能作为返回值被其余函数返回。接受函数作为参数或者返回值为函数的函数叫作高阶函数。作为参数传递的函数叫作回调函数。

为何咱们须要回调

一个很是重要的理由就是，js是事件驱动语言。这意味着，js不会等待响应，而是一直侦听其余事件一直执行下去。来看个例子：

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();
复制代码

和你想的同样，函数first先执行，而后是second函数。

// 1
// 2
复制代码

到如今为止还好。

可是若是函数first有一段不能当即执行的代码呢？举个例子，咱们有个异步请求（ajax之类的），须要等待响应的。咱们用setTimeout来模拟下。咱们延迟500毫秒来模仿这个异步请求。

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

如今先不须要知道setTimeout的工做原理。重要的是咱们知道在500毫秒后会打印1；因此当咱们调用时会发生什么？

first();
second();
// 2
// 1
复制代码

即便咱们先调用了first函数，咱们看到仍是先打印了second函数里的内容。

这并非由于js不按照咱们想要的顺序执行，而是js没有等待first函数的响应，继续执行了 second 函数。

为何要告诉你这些？由于你不能只是一个接着一个调用函数，并但愿它们以正确的顺序执行。回调是一种确保某些代码在其余代码已经完成执行以前不会执行的方法。

建立回调

来动手写一个吧！

首先打开你的开发者工具Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J控制台并在控制台输入如下代码：

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}
复制代码

上面的代码里，咱们建立了一个接受一个参数的 doHomework 函数，而且把参数alert出来。

doHomework('math');
// Alerts: Starting my math homework.
复制代码

如今加入咱们的回调，代码以下：

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);
复制代码

此示例的结果与前一个示例彻底相同，但setup略有不一样。 如你所见，咱们在doHomework（）函数调用期间将alertFinished函数定义做为参数传递！

真实例子

上周我发表了一篇关于如何用38行代码建立Twitter机器人的文章。 之因此能作到的惟一缘由是由于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的请求方法
• 有三个参数，第一个是请求路径，第二个是咱们的参数，第三个是对响应作点事情的回调函数。

回调在这里很重要，由于咱们须要等待来自服务器的响应才能继续咱们的后续操做。咱们不知道咱们的API请求是否会成功，因此在经过get请求将参数发送到search / tweets后，咱们继续执行咱们的同步任务，执行完后等待并执行异步任务。 一旦Twitter响应，就会调用咱们的回调函数。 Twitter将向咱们发送错误（错误）对象或响应对象。 在咱们的回调函数中，咱们可使用if（）语句来肯定咱们的请求是否成功，而后相应地对新数据进行操做。