初步讲解JS中的callback回调原理
JS的异步执行机制
什么是异步执行
为了提高Javascript代码的运行效率，JS对于部分函数方法采用了异步调用机制（如Ajax的操作）。异步执行的函数方法的执行并非为一个队列挨个执行的，而是相互独立，同时调用执行的，从而避免代码运行阻塞，减少不必要的等待时间。
我们来举一个栗子
大部分新手编程时，都会按照一种线性思维的方法去设计代码，这就跟JS中的异步执行机制相冲突。
如：我们在node中，希望在一个读取文档流的操作后，将读取到的文件中的字符串赋值给变量，str 之后再用 console.log() 方法输出读取到的文件内容，这时如果按照我们的线性思维去设计代码，会写出如下的操作：
// 需求:封装一个方法，传入一个路径，可以读取相对应的文件
const fs = require('fs');
const path = require('path');
var str;
// 给定文件路径，返回读取到的内容
function getFileByPath(fpath) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err)
throw err;
else {
str = dataStr;
}
})
}
// 调用读取文件方法
getFileByPath(path.join(__dirname, './files/1.txt'));
console.log(str);
控制台输出的结果为
Undefined
这就是由于我们是按照线性思维去考虑问题，理所当然的认为变量 str 的赋值操作在 console.log() 操作之前，然而真实的情况是，JS在被解析之后，可以瞬间执行的操作，如 console.log()、for循环 等基础操作，都是按照队列执行的，如：
var test = function () {
console.log('1');
}
test();
for (var i = 2; i < 5; i++) {
console.log(i);
}
console.log('6');
控制台输出的结果为
1
2
3
4
5
6
然而读取文件操作是一个会导致代码阻塞的操作，所以JS会将文件读取操作放置在异步队列中，同时执行后方代码。所以栗子中执行代码的流程是执行到 getFileByPath() 这一步的时候开启一个新队列，在执行 getFileByPath() 方法的同时执行后方代码，但是由于后方代码执行速度比 getFileByPath() 快得多，所以就会导致最终效果为先执行了 console.log() 方法，后执行了 getFileByPath() 方法。
回调函数
那倘若说我们就是需要有一步操作，放在读取文件之后再执行，而不是跳过读取文件操作直接执行，那该怎么办呢？
这就需要用“回调函数”的思想来拯救我们。大部分人都知道回调函数在 jQuery 中被发挥的淋漓尽致，然而新手往往很少知道回调函数原理，所以接下来我们仍以这个栗子为代表探讨回调函数。
我们先抛开回调函数，用最原始的方法让一些操作在读取文件操作后执行该怎么办呢？那就是直接改写整个 getFileByPath() 方法：
// 需求:封装一个方法，传入一个路径，可以读取相对应的文件
const fs = require('fs');
const path = require('path');
var str;
// 给定文件路径，返回读取到的内容
function getFileByPath(fpath) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err)
throw err;
else {
str = dataStr;
+ console.log(str);
}
})
}
// 调用读取文件方法
getFileByPath(path.join(__dirname, './files/1.txt'));
这样我们就可以在直行完 getFileByPath 方法之后在控制台输出读取的文件内容。但是这样的操作并不能很好的解决我们的问题，倘若方法被封装拿给别人使用，其他人需要更改源码才可以实现功能方法，很显然这样并不灵活，甚至还会更改该方法原有的功能。
所以我们就需要设置一个回调函数，在异步操作完成之后，再进行我们需要的下一步的操作。
为了理解回调函数的原理，我们先将变更后的 if...else... 这一部分代码分离出来：
if (err)
throw err;
else {
var str = dataStr;
+ console.log(str);
}
可以看出，读取完文件之后，会直行else下的操作，如果我们把 var str = dataStr; console.log(str) 封装成一个方法命名为 clg，那我们在 else 之后执行 clg() 方法就可以实现同样的操作：
function getFileByPath(fpath) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err)
throw err;
else {
clg(dataStr);
}
})
}
function clg(dataStr){
str = dataStr;
console.log(str);
}
getFileByPath(path.join(__dirname, './files/1.txt'));
值得注意的是，我们在调用 clg() 方法时，对回调函数设置了一个参数 clg(dataStr);
这个 dataStr 就是文件读取操作读取的文件内容，我们要把读取内容传入到 clg() 方法中，就需要在调用
clg() 方法时将其作为参数写入，这样我们才能在 clg() 方法内部调用文件操作读取出的内容，即使用变量
dataStr
这样我们就可以将读取文件操作后执行的任何操作放在 clg() 方法中就可以执行，倘若要做出操作变更，只需要更改 clg() 方法就可以了，不需要去更改 getFileByPath() 方法源码中的内容，这就达到了我们要的结果。这个 clg() 实际上就可以称之为一个回调函数，但是这样还是会让代码变得繁杂，操作不方便。
我们来看一下jQuery的回调函数：
$(’#demo’).animate({“opacity”:“1”}, 1000, fucntion(){… 回调函数 …});
jQuery将回调函数作为一个参数传入到方法中，所以我们只要在 getFileByPath() 方法中追加一个参数，这个参数是一个函数，我们就可以在源码的 else 后执行传入的这个函数，这个函数就称为真正意义上的 “回调函数” 了。
改写后的 getFileByPath() 方法
function getFileByPath(fpath, callback) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err)
throw err;
else {
callback(dataStr);
}
})
}
之后我们再在调用的时候，在参数位写入一个方法函数，这个方法就会被传入getFileByPath()方法内部，等文件读取操作完成之后再直行。
getFileByPath(path.join(__dirname, './files/1.txt'), function(dataStr){
str = dataStr;
console.log(str);
});
这就是对回调函数的简单讲解，萌新程序员，欢迎纠错- ̗(๑ᵔ⌔ᵔ๑)
