关于js中的回调函数callback,通俗易懂

前言

其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原由,这么着,这个callback的概念就越来越混乱,因为你总感觉它是你Ajax请求后调用的那个函数,又感觉它是你某一个函数中的形参而已,而当你有一天看到一点关于Node.js的代码后你会更加崩溃,因为你会发现很多的callback,但是这么着下去肯定是不行的,因为很多的东西如果只是知道概念和理论,没有实践出结果,没有思考和感受,这些东西永远不是你的,所以任何关于技术上用到的东西都应该去花时间钻研一下,学习 付出时间 实践都会搞明白的,还会沉淀很多思想,所以最近一直在浏览相关的文章和资料,自己在项目中也用到了一些去实践,这样一轮下来后,你会发现明亮了很多

一 .搞清楚异步和同步

异步async/同步sync

举个小栗子

1.早上起来不论你是先刷牙还是先洗脸,都要等一个事情完毕后才能进行下一项,这就是一个同步的例子

2.然后刷牙的时候你也可以烧水喝 (不用等你刷完牙)这就是一个异步的例子

来段异步代码示例

js里面最基础的异步实现

运行结果

以上代码会先执行函数a,而且不会等到a中的延迟函数执行完才执行函数b, 在延迟函数被触发的过程中就执行了函数b,当js引擎的event 队列空闲时才会去执行队列里等待的setTimeout的回调函数,这就是一个异步的例子

题外话:

调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息,消息会被马上处理。但是,如果有其它消息,setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间 而非确切的时间

所以即使,时间设置为0,也是会照样先执行函数b

来段同步代码示例

结果输出1

print函数会等change函数完成之后去执行,所以结构输出为1,因为change函数修改了全局变量a的值,change执行之后才执行的print函数

二.回调函数到底是什么

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

以上解释是Google得出的解释,非常清晰简明,有时候我觉得英文理解要比翻译成中文二次理解更清楚

来看几个经典的回调函数代码,我敢保证你一定用过他们

异步请求的回调函数

点击事件的回调函数

数组中遍历每一项调用的回调函数

同步回调的例子

所以回调与同步、异步并没有直接的联系,回调只是一种实现方式,既可以有同步回调也可以有异步回调还可以有事件处理回调和延迟函数回调,这些在我们工作中有很多的使用场景

所以其实并不是我们不认识回调函数,而是我们都萦绕在了这个“callback“ 这个词上,当你在一个函数中看到它是就会困惑,其实它只是一个形参名字而已

三.为什么写回调函数

看了以上的简单介绍之后,是不是对callback不再陌生和觉得神秘,所以尽情的去使用吧,

1.关于回调函数和js单线程以及js异步机制

我们都知道js是单线程的,这种设计模式给我们带来了很多的方便之处,我们不需要考虑各个线程之间的通信,也不需要写很多烧脑的代码,也就是说js的引擎只能一件一件事的去完成和执行相关的操作,所以所有需要执行的事情都像排队一样,等待着被触发和执行,可是如果这样的话,如果在队列中有一件事情需要花费很多的时间,那么后面的任务都将处于一种等待状态,有时甚至会出现浏览器假死现象,例如其中有一件正在执行的一个任务是一个死循环,那么会导致后续其他的任务无法正常执行,所以js在同步机制的缺陷下设计出了异步模式

在异步执行的模式下,每一个异步的任务都有其自己一个或着多个回调函数,这样当前在执行的异步任务执行完之后,不会马上执行事件队列中的下一项任务,而是执行它的回调函数,而下一项任务也不会等当前这个回调函数执行完,因为它也不能确定当前的回调合适执行完毕,只要引它被触发就会执行,举个例子,

图片资源还未请求完毕

上图可以看到,我要购买一个东西,当我点进物品的详情页之后,图片资源还未请求完毕,而此时我就可以点击add to cart, 发起另一个请求,js任务列表中的添加购物车事件就会开始执行,它的执行也不会干扰到图片资源的请求任务,这也是异步执行机制的妙处

2.js的单线程浏览器内核的多线程

说到js的单线程,顺便再了解一下关于浏览器内核的多线程,关于浏览器工作原理此处不做讲解,因为自己研究的不深入,等待研究学习研究透彻再分享

cayley的草图

浏览器常驻三大线程:  js引擎线程,GUI渲染线程,浏览器事件触发线程

看到此图你是不是会豁然开朗许多,因为浏览器是一个多线程的执行环境,在浏览器的内核中分配了多个线程,最主要的线程之一即是js引擎的线程,同时js事件队列中的异步请求,交互事件触发,定时器等事件都是由浏览器的事件触发线程进行监听的,浏览器的事件触发线程被触发后会把任务加入到js 引擎的任务队列中,当js 引擎空闲时候就会开始执行该任务

完结

以上就是本篇文章的全部内容,由对回调函数的陌生到熟悉和使用,以及对同步/异步的概念,还有js的执行机制以及浏览器内核的多线程机制相信大家都有了一个简单的知识脉络,希望通过此文提到的内容,每个小伙伴去查阅更深入的资料,于此同时我也会不断的去修缮,所以我们不能做一个知其然而不知其所以然的程序员,要有充分的好奇心去学习它,带着学习让我们受益的心态去做和研究自己感兴趣的东西是一件非常快乐的事情,希望我可以把我的快乐带给每一位看文章的小伙伴,也希望你多多给我提出意见,让我们一起在学习的路上共同发现和成长,2107年欢迎你和我一起做一个不断努力学习的知识分子

说明:文章中的图片均处于本人截图和绘制,文字均属原创,转载请注明出处

作者:Cayley硕儿
链接:https://www.jianshu.com/p/6bc353e5f7a3
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/moxiaowohuwei/p/8438236.html

时间: 2024-08-06 01:48:40

关于js中的回调函数callback,通俗易懂的相关文章

理解javascript中的回调函数(callback)【转】

在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后将它返回.这是在JavaScript中使用回调函数的精髓.本篇文

【juincen】Java中的接口interface类比js中的回调函数

前几天在左讯飞语音的时候,无意间意识到java中的接口和js中常用的回调函数有点类似,今天在这儿整理一下思路. interface,Java中的接口,为什么会有这个东西. 一,预留声明 比如两个程序员A和B,A要写一段程序,其中需要调用到B写的程序.这时候A可以写一个接口: public interface Demo{ void deal(); } A要调用的方法先“预留声明”在接口里:deal 然后B去完善这个接口,B写了一个实现类实现了这个Demo接口. A在自己的业务逻辑里面只用调用接口的

理解javascript中的回调函数(callback)

以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: app.use(function(req, res, next) {    var err = new Error('Not Found');    err.status = 404;    next(err);}); app是对象,use是方法,方

js中的回调函数

回调就是一个函数的调用过程.那么就从理解这个调用过程开始吧.函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b.那么这个过程就叫回调. 其实中文也很好理解:回调,回调,就是回头调用的意思.函数a的事先干完,回头再调用函数b. 这里必须清楚一点:函数b是你以参数形式传给函数a的,那么函数b就叫回调函数. 也许有人有疑问了:一定要以参数形式传过去吗,我不可以直接在函数a里面调用函数b吗?确实可以.求解中. <解惑:如果你直接在函数a里调用的话,那么这个回调函数就被限制死了.但是使用函

js中的回调函数的理解和使用方法

一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上是一种对象,它可以存储在变量中,通过参数传递给另一个函数,在函数内部创建,从函数中返回结果值",因为函数是内置对象,我们可以将它作为参数传递给另一个函数,到函数中执行,甚至执行后将它返回,它一直被"专业的程序员"看作是一种难懂的技术. 回调函数的英文解释为: A callback is a functi

javascript中的回调函数(callback) (转载)

代码如下: app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了.这段代码怎么理解呢?我们先来了解回调函数这个概念. 首先要了解,在 js 中,函数也是对象,可以赋值给变量,可以作为参数放在函数的参数列表中.比如: 代码如下: var doSomething = f

js中的回调函数,什么是回调函数?

一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上是一种对象,即是内置对象,它可以存储在变量中,通过参数传递给另一个函数,我们可以将它作为参数传递给另一个函数,到函数中执行,甚至执行后将它返回,它一直被"专业的程序员"看作是一种难懂的技术. 回调函数的英文解释为: A callback is a function that is passed as an arg

JS中的回调函数详解

function studyEnglish(who){ document.write(who+"学习英语</br>"); } function study(callback,params){ callback(params); } study(studyEnglish,'ck'); //或者 function study(callback,params){ callback(params); } study(function(who){ document.write(who

js回调函数(callback)

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://luxiao1223.blog.51cto.com/2369118/482885 Mark! js学习 不喜欢js,但是喜欢jquery,不解释. 自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函数了.不懂啊,于是在google回调函数,发现网上的中文解释实在是太"深奥"了,我承认自己