初步讲解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这个变量了。

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