以下是第三课的翻译内容
回调函数
这节课准备深入回调函数，回调函数在 Javascript 中十分常用，可能已经出现在你的代码当中，还是走一遍基础吧，下面是一个简单的例子。
- 内嵌式
var fruits = ['apple', 'banana', 'pear'];
// forEach 接收一个函数作为参数，这就叫做回调函数
// 回调函数中返回的内容会传递给函数参数
fruits.forEach(function(value){ // 内嵌
console.log(value); // 'apple', 'banana', 'pear'
};
console.log('数组循环后才显示这行内容');
- 提前声明函数方式，与内嵌式区别是不需要将函数体写在 forEach 的函数类参数里
var fruits = ['apple', 'banana', 'pear'],
callback = function(value)){ // 声明函数
console.log(value); // 'apple', 'banana', 'pear'
};
fruits.forEach(callback);
console.log('数组循环后才显示这行内容');
简而言之，回调函数就是一个作为其他函数里的参数，就如 forEach 方法，它将会在某一时点执行。
上面的 forEach 方法是同步方法，代表需要等待处理完成才会继续下一行代码。
我们需要研究的是带回调方法参数的异步 Javascript，记住异步的特征是现在开始，过会儿结束。
下面继续上节课的 $.get 异步方法：
- $.get 第一个参数是
获取数据的源（此处是静态 JSON文件） - $.get 第二个参数是当获取数据完成后执行的回调方法，数据会返回到回调方法的参数中，
这个回调方法不会马上执行
$.get('data/tweet.json', function(data){
console.log(data);
});
$.get 方法会开辟另外一个线程获取数据，空出 Javascript 线程执行下面的代码，等到获取数据回来后，会将数据返回给回调函数。
上例是内嵌式，提前声明方式跟上方一样，不再举例。
回调地狱
看起来不错，但当我需要使用大量异步代码并且没关心如何结构化处理这些回调函数的话，不久后再处理就会变成噩梦。你可能已经听过一个词语叫回调地狱，就是在回调函数里继续写回调函数，一层一层嵌套。如果你真需要处理这种情况，你肯定会疯狂到想要一头撞到墙上。
接下来看看回调地狱的代码和如何能稍作整理。
目录结构
-- data
|_ tweet.json
|_ friend.json
|_ video.json
-- async.js
-- index.html
首先，发起 3 个 Ajax 请求，data 文件夹下面有三个极其简单的 JSON 文件，要做的是依次抓取这里的每一个 JSON 文件内容。
这里作为演示将会使用 $.ajax 取代 $.get 方法，演示 $.ajax 传递不同的参数。
'async.js'
$.ajax({
type: 'get', // 请求方法的类型
url: 'data/tweet.json', // 数据源
success: function (data) { // 当请求成功获取数据后执行的方法
// 成功请求 tweet.json 后再请求 friend.json
console.log(data);
$.ajax({
type: 'get', // 请求方法的类型
url: 'data/friend.json', // 数据源
success: function (data) { // 当请求成功获取数据后执行的方法
// 成功请求 friend.json 后再请求 video.json
console.log(data);
$.ajax({
type: 'get', // 请求方法的类型
url: 'data/video.json', // 数据源
success: function (data) { // 当请求成功获取数据后执行的方法
console.log(data);
},
error: function (jqXHR, textStatus, error) { // 当请求出错时执行
console.log(error);
}
});
},
error: function (jqXHR, textStatus, error) { // 当请求出错时执行
console.log(error);
}
});
},
error: function (jqXHR, textStatus, error) { // 当请求出错时执行
console.log(error);
}
});
上面的代码完成了成功请求 tweet.json 后再请求 friend.json，friend.json 成功请求后再请求 video.json，并输出成功获取的数据。
酷吧，其实不酷，这就叫回调地狱（回调函数里再出现回调函数，一层一层嵌套），同时你可以看到代码缩进形成一个死亡三角形，并不是我们想要的 Javascript 代码。这些代码很难处理，错误处理都在下方，正常处理在上方，假如需要调试深层代码会变得困难。
现在要做的是稍微分离一下代码：
- 1、分离错误处理代码，提前声明一个回调函数用来做错误处理
function errorHandler(jqXHR, textStatus, error) { // 当请求出错时执行
console.log(error);
}
- 2、将正常处理代码抽取作为一个回调函数
两步都完成，最终代码如下：
// 分离错误处理代码，提前声明一个回调函数用来做错误处理
function errorHandler(jqXHR, textStatus, error) {
console.log(error);
}
function cbTweet(data) {
console.log(data);
$.ajax({
type: 'get',
url: 'data/friend.json',
success: cbFriend,
error: errorHandler
});
}
function cbFriend(data) {
console.log(data);
$.ajax({
type: 'get',
url: 'data/video.json',
success: function (data) {
console.log(data);
},
error: errorHandler
});
}
$.ajax({
type: 'get',
url: 'data/tweet.json',
success: cbTweet, // 将正常处理代码抽取作为一个回调函数
error: errorHandler
});
现在代码看起来更像同步方式的处理，不进入只是继续往下。这是一种较好的回调处理方式，稍好的避免回调地狱。但我还是不太喜欢这种，因为看起来还是有点复杂。
有一种处理异步 Ajax 请求更好的方法，就叫做 Promise，下节课再会。
