关于js的回调、同步回调、异步回调

BakerJ 发布于2019-08-20 16:30 / 1980人阅读

摘要：回调定义刚开始学习时，对回调函数的理解仅仅停留在知道定义阶段。什么是回调函数就是将一个函数作为参数传递给另一个函数，作为参数的这个函数就是回调函数。参考文章详解回调函数以为例解读异步回调和异步编程的种方法阮一峰的网络日志

回调定义

刚开始学习javascript时，对回调函数的理解仅仅停留在知道定义阶段。什么是回调函数？就是将一个函数作为参数传递给另一个函数，作为参数的这个函数就是回调函数。至于为什么要用到回调函数？回调函数有什么作用？当时对这些一无所知！最近学习node.js涉及到了大量的异步编程，很多地方都需要用到回调函数，所以这两天深入了解了JavaScript的回调函数，下面是我对回调函数的理解。

函数也是对象

想要弄明白js回调函数，首先要清楚函数的规则，在javascript中函数是一个对象，准确的来说函数是用function()构造函数创建的一个function对象，因此我们可以将函数存储在变量中，当然也就可以将存储在变量中的函数作为一个参数传递给另一个函数，这就是回调函数。
举个例子：

var callback = function(arg3) {
    console.log("callback Totle is:" + arg3)
  }

function fn(arg1, arg2, cb) {
  var Total = arg1 + arg2;
  cb(Total);
  console.log("mainFunction Totle is:" + Total)
}

fn(2, 2, callback)   // 调用fn()函数，并传入2, 2, callback作为参数

上面例子中我们将一个匿名函数赋值给变量callback，同时将callback作为参数传递给了fn()函数，这时在函数fn()中callback就是回调函数。

同步回调和异步回调

上面的代码执行结果为：

callback Totle is:4
mainFunction Totle is:4

不对啊！回调函数不是应该在主函数的最后执行吗？
对，很多介绍回调函数的例子讲到这里是就完了，异步回调函数的确是应该在函数的最后执行，不过上面的例子是一个同步回调函数，函数的执行顺序依然自上而下顺序执行。那么什么是异步回调呢？我们又怎么实现异步回调呢？下面我们举两个例子来说明：

示例1：

function f2() {

    console.log("f2 finished") 
}

function f1(cb) {

    setTimeout(cb,1000)        //用setTimeout()模拟耗时操作
    console.log("f1 finished")
}

f1(f2);    //得到的结果是 f1 finished ，f2 finished

这里我们用setTimeout()来模拟耗时操作的前提是js中的setTimeout()函数支持异步处理，所以我们得到的结果是 f1 finished ，f2 finished

示例2：

var fs = require("fs");

fs.readFile("input.txt","utf-8", function (err, data) {
    if (err) return console.error(err);
    console.log(data.toString());
});

console.log("程序执行结束!");

程序执行的结果是:

$ node app
程序执行结束!
我们来测试一下异步回调函数

上面例子中我们先创建了一个文件input.txt，里面的内容是:"我们来测试一下异步回调函数"
如果按照同步的思维，程序应该执行fs.readFile，直到文件读完之后才执行后面的console.log("程序执行结束!"); 然而node中的fs.readFile是支持异步处理的，因此程序执行到这儿的时候并不会阻塞，而是继续向后执行，当文件读取完毕之后再自动调用传入的匿名回调函数，因此出现了上面的结果。

参考文章：
详解回调函数——以JS为例解读异步、回调和EventLoop http://blog.csdn.net/tywinsta...
Javascript异步编程的4种方法 - 阮一峰的网络日志http://www.ruanyifeng.com/blo...

超融合服务器服务器托管同步回调和异步回调 js 异步回调返回数据有关于回调的问题异步回调

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

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

同步与异步、异步与回调

摘要：同步与异步以上为同步代码，函数必须等函数执行完毕后才能执行。异步回调产生的结果就是，函数的调用并不直接返回结果，而往往是交给回调函数进行异步处理。同步与异步： function a(){} function b(){} a(); b(); 以上为同步代码，函数b必须等函数a执行完毕后才能执行。 function a(){ ...

dinfer 2019-08-21 10:45 评论0 收藏0
JS基础——异步回调

摘要：回调大多出现在请求，用于处理收到的请求结果。回调函数和异步一开始我被回调和异步有点搞晕了。异步编程的实现就我目前知道两种回调函数和事件监听，其实看了阮神的异步编程的文章和下面的评论之后得出的理解。为了不影响的执行，我们可以把写成的回调函数。前言一个刚入前端的小菜，虽然以前看到过关于回调的文章，但是呢，理解起来有点费劲啊。当时的脑海里就一个概念。回调：大多出现在Ajax请求，用于处...

tianhang 2019-08-22 10:40 评论0 收藏0
由setTimeout深入JavaScript执行环境的异步机制

摘要：图片转引自的演讲和两个定时器中回调的执行逻辑便是典型的机制。异步编程关于异步编程我的理解是，在执行环境所提供的异步机制之上，在应用编码层面上实现整体流程控制的异步风格。问题背景在一次开发任务中，需要实现如下一个饼状图动画，基于canvas进行绘图，但由于对于JS运行环境中异步机制的不了解，所以遇到了一个棘手的问题，始终无法解决，之后在与同事交流之后才恍然大悟。问题的根节在于经典的J...

codeGoogle 2019-08-21 18:29 评论0 收藏0
JS异步编程之callback

摘要：而异步则是相反，调用在发出之后，这个调用就直接返回了，所以没有返回结果而是在调用发出后，被调用者通过状态通知来通知调用者，或通过回调函数处理这个调用。总结回调函数是异步编程中的基石，但同时也存在很多问题，不太适合人类自然语言的线性思维习惯。为什么 JS 是单线程？众所周知，Javascript 语言的执行环境是单线程（single thread）。所谓单线程，就是指一次只能完成一...

superw 2019-08-23 15:15 评论0 收藏0
解析关于JavaScript事件循环同步任务与异步任务

　　学习一门知识，有些内容必须要提前明白，比如在学习js中同步异步的问题前，需要明白，js是单线程的，为什么它得是单线程的呢？现在先从它应用的场景来说，就是用来让用户与页面进行交互的吧。假如有js是多线程的，那在这个线程里面，用户点击某个按钮会增加一个DOM节点，在另一个线程里面，用户点击这个按钮又会删除一个DOM节点，那么此时js就不知道该听谁的了。这就是为什么会出现同步异步。假设没有异步，那么...

3403771864 2022-10-19 22:10 评论0 收藏0