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

Simon_Zhou 发布于2019-08-23 13:49 / 659人阅读

摘要：大部分人都知道回调函数在中被发挥的淋漓尽致，然而新手往往很少知道回调函数原理，所以接下来我们仍以这个栗子为代表探讨回调函数。这就是对回调函数的简单讲解，萌新程序员，欢迎纠错

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");

控制台输出的结果为

然而读取文件操作是一个会导致代码阻塞的操作，所以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这个变量了。

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

GPU云服务器云服务器回调的原理、实现与应用回调函数原理c语言 js基础视频讲解 js乘法表视频讲解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99622.html

源码解读JS与Native通信原理-WebViewJavascriptBridge

摘要：并且最好是在的回调函数中调用，可以保证初始化成功了。当我们通知端进行初始化，并且初始化之后，里面会去遍历中的回调函数，并将当做参数注入。里面会将里面的回调函数保存在全局对象变量中则是自增的。缘由：网上其实有很多讲解WebViewJavascriptBridge原理的文章，但都着重了Native端，今天从一个纯前端角度出发，抓住核心脉络讲解下原理，清晰明了，一文即懂。通信的基础： ...

learn_shifeng 2019-08-26 13:33 评论0 收藏0
js处理异步函数：从callback到promise

摘要：在处理异步回调函数的情况有着越来越值得推崇的方法及类库，下面会依次介绍处理异步函数的发展史，及源码解读。而对象的状态，是由第一个的参数成功回调函数或失败回调函数的返回值决定的。函数的执行分为同步和异步两种。同步即为同步连续执行，通俗点讲就是做完一件事，再去做另一件事。异步即为先做一件事，中间可以去做其他事情，稍后再回来做第一件事情。同时还要记住两个特性：1.异步函数是没有返回值的...

dance 2019-08-22 15:34 评论0 收藏0
WebViewJavascriptBridge原理解析

摘要：否则按照正常流程处理。如果是表示是初始化环境的消息，如果是则表示是发送消息。则立即发送消息。回调主动调用获取注册的函数调用中的对应函数处理把消息从发送到，执行具体的发送操作。处理从返回的消息。从而找到具体的实现执行。基本说明我们的项目是一个OC与javascript重度交互的app，OC与javascript交互的那部分是在WebViewJavascriptBridge的githu...

yck 2019-08-21 11:39 评论0 收藏0
WebViewJavascriptBridge原理解析

摘要：否则按照正常流程处理。如果是表示是初始化环境的消息，如果是则表示是发送消息。则立即发送消息。回调主动调用获取注册的函数调用中的对应函数处理把消息从发送到，执行具体的发送操作。处理从返回的消息。从而找到具体的实现执行。基本说明我们的项目是一个OC与javascript重度交互的app，OC与javascript交互的那部分是在WebViewJavascriptBridge的githu...

andot 2019-08-22 10:51 评论0 收藏0