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

JS的异步执行机制

什么是异步执行

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

我们来举一个栗子

大部分新手编程时，都会按照一种线性思维的方法去设计代码，这就跟JS中的异步执行机制相冲突。

如：我们在node中，希望在一个读取文档流的操作后，将读取到的文件中的字符串赋值给变量，str 之后再用 console.log() 方法输出读取到的文件内容，这时如果按照我们的线性思维去设计代码，会写出如下的操作：

// 需求:封装一个方法，传入一个路径，可以读取相对应的文件
const fs = require('fs');
const path = require('path');

// 给定文件路径，返回读取到的内容
function getFileByPath(fpath) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err)
      throw err;
    else {
      var str = dataStr;
    }
  })
}

// 调用读取文件方法
getFileByPath(path.join(__dirname, './files/1.txt'));

console.log(str);

控制台输出的结果为

ReferenceError: str is not defined

这就是由于我们是按照线性思维去考虑问题，理所当然的认为变量 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会将其放置在异步队列中，执行后方代码，所以栗子中执行代码的正确顺序应该是先执行console.log() 再执行 getFileByPath()。

回调函数

那倘若说我们就是需要有一步操作，放在读取文件之后再执行，而不是跳过读取文件操作直接执行，那该怎么办呢？

这就需要用“回调函数”的思想来拯救我们。大部分人都知道回调函数在 jQuery 中被发挥的淋漓尽致，然而新手往往很少知道回调函数原理，所以接下来我们仍以这个栗子为代表探讨回调函数。

我们先抛开回调函数，用最原始的方法让一些操作在读取文件操作后执行该怎么办呢？那就是直接改写整个 getFileByPath() 方法：

// 需求:封装一个方法，传入一个路径，可以读取相对应的文件
const fs = require('fs');
const path = require('path');

// 给定文件路径，返回读取到的内容
function getFileByPath(fpath) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err)
      throw err;
    else {
      var str = dataStr;
+        console.log(str);
    }
  })
}

// 调用读取文件方法
getFileByPath(path.join(__dirname, './files/1.txt'));

这样我们就可以在直行完 getFileByPath 方法之后在控制台输出读取的文件内容。但是这样的操作并不能很好的解决我们的问题，倘若方法被封装拿给别人使用，其他人需要更改源码才可以实现功能方法，很显然这样并不灵活，甚至还会更改该方法原有的功能。

所以我们就需要设置一个回调函数，在异步操作完成之后，再进行我们需要的下一步的操作。

为了理解回调函数的原理，我们先将变更后的这一部分代码分理出来：

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){
    var str = dataStr;
    console.log(str);
}

getFileByPath(path.join(__dirname, './files/1.txt'));

这样我们就可以将读取文件操作后执行的操作放在 clg 方法中就可以执行，这个 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){
    var str = dataStr;
    console.log(str);
});

值得注意的是，我们在源码中设置传入的参数位时，对回调函数设置了一个参数

callback(dataStr);

这个dataStr就是文件读取操作读取的文件内容，我们将个变量传入在callback()方法中，在调用getFileByPath()时写入的回调函数中就可以调用dataStr这个变量了。

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