初步讲解JS中的callback回调原理

JS的异步执行机制

什么是异步执行

为了提高Javascript代码的运行效率，JS对于部分函数方法采用了异步调用机制（如Ajax的操作）。异步执行的函数方法的执行并非为一个队列挨个执行的，而是相互独立，同时调用执行的，从而避免代码运行阻塞，减少不必要的等待时间。

3985563-bbc80847ea8e5755.jpg

我们来举一个栗子

大部分新手编程时，都会按照一种线性思维的方法去设计代码，这就跟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);
});

这就是对回调函数的简单讲解，萌新程序员，欢迎纠错- ̗(๑ᵔ⌔ᵔ๑)