js中callback回调函数、嵌套回调–全面详细解析(生活案例版)

 浆糊之家   2018-04-10 01:21   239 views 热度值

回调函数的处理逻辑理解:

所谓的回调函数处理逻辑,其实就是先将回调函数的代码 冻结(或者理解为闲置),接着将这个回调函数的代码放到回调函数管理器的队列里面。
待回调函数被触发调用的时候,对应的回调函数的代码才会从管理器队列取出来并自动执行(激活回调函数的代码),实现异步的编程效果。

关于回调函数的另外一个更加形象的说法:
回调函数一个实例:儿子去做一个事情,完成之后父亲会给一个红包(给儿子)。然后父亲立刻去忙别的事情了。
分析例子:
首先,事情必须要完成之后才可以给红包。另外,红包的钱是父亲给,儿子只需要在完成之后,自己拆开红包即可。当然,儿子并不用知道父亲会给多少钱。
很简单吧?其实回调函数也就是这样子的思路。
儿子去做一个事情–>调用儿子的做事情的函数方法。儿子的函数方法是异步的,并不会影响下一步动作:父亲工作。
红包–>回调函数,也就是callback(通常是匿名函数)。儿子只需要确定拆开它(执行它)即可。至于里面是什么,有多少钱,儿子管不了。
红包里面的钱–>可以理解为回调函数所执行的代码段。由调用者提供!决定给多少钱。
儿子完成之后才可以拆红包–>儿子的工作函数完成之后,才会调用所提供的回调函数(也就是拆红包,数钱)。

现在问题来了,对于嵌套的回调函数应该如何理解呢?

对于一些必须要等回调函数执行完毕才可以确定的动作,实际上,就是会掉入一个层层回调的局面了。这点也是回调函数的复杂的地方!也就是所谓的嵌套回调函数。
换句话说,只要您要获取的值是要被回调才确定的,那接下来的所有代码都必须用回调的方式来编写,层层嵌套。
以百度提问的一个例子简单说明:
问题:
js 回调函数问题的执行结果想作为返回值

 

receive这个函数的目的是返回接受到的数据(data),但data值在一个回调函数里面,总是先执行return ,再执行回调函数,因此返回值总是undefined,有什么办法可以解决吗?
解决办法:
建议改变你的思维方式,将你的函数 receive 也改成回调式的:

 

然后,别的地方要调用receive函数,则将这个函数获取的值之后的所有动作都封装在回调函数callback里面。
例如:

上面的只是一个很简单的例子,
如果有3层以上的嵌套回调函数,理解方面是不容易的。下面,我就以一个现实生活中的买玻璃的例子来讲述嵌套回调函数的执行过程!

举个容易理解的实际例子:

我向要二级供应商要2块镀膜的建筑玻璃。我不需要知道这个玻璃怎么制作的,玻璃怎么到一级供应商的,怎么到二级供应商的。
反正你二级供应商能提供给我要求的玻璃就可以了,提供之后要告诉我是多少价格的,好让我准备付款给你。
–>需要注意的是,我收到了建筑玻璃,我才可以做安装玻璃等等的动作。但是,拉屎拉尿什么的,我想什么时候做就什么时候做,和购买玻璃并没什么关系。
上面的例子就是一个典型的嵌套回调函数实例!
首先,开始模拟并构造基本函数:
–>制造过程函数:

 

–>一级供应商函数:

 

–>二级供应商函数:

 

–>用户函数:
用户是最终的消费者。

 

基于上面所定义的函数方法,模拟一个现实的例子:
用户早上吃饭,中午买玻璃,下买玻璃的订单之后,接着拉个屎,再睡觉。
试想一下,如果要等到玻璃来到之后才可以上厕所,那岂不是被憋死了。
—-程序处理过程:

上面的例子可以看到,实际上回调函数是层层执行的。执行完最深的那层,再逐一向上执行。
执行用户购买玻璃的方法的时候,程序的执行顺序:
主函数的执行顺序:
userBuy(用户调用购买货物的方法) 父
–>vendor2(二级供应商提供货物的方法) 子
–>vendor1(一级供应商提供货物的方法) 孙
–>make(工厂制造过程的方法) 曾孙
而每个主函数所编写的的回调函数的代码的执行顺序:
make.cb(工厂制造完毕,会调用回调函数[执行(父级的)一级供应商提供的代码],相当于通知一级供应商,货物已经完成!价格是多少。)
–>vendor1.cb(一级供应商确认工厂制造完成,调用回调函数[执行二级供应商提供的代码],通知二级供应商,货物已经有了,价格是多少。这时候的价格已经加价10%)
需要注意的是,必须要等到生产完成并知道工厂提供的实际价格是多少,才可以加价。所以加价的代码由vendor1主动提供,但是执行由工厂用callback执行!
–>vendor2.cb(二级供应商拿到货,调用回调函数[执行用户购买所提供的代码],通知用户,货物已经有了,价格是多少。这时候价格又加了20%。真黑!)
–>userBuy.cb(用户拿到货了,先验货并付款,并调用回调函数[执行玻璃到货之后的代码,也就是调用user.userBuy的时候编写的回调代码,例如安装玻璃什么的]。流程走完!)
可以看出,嵌套的回调函数的执行顺序是逆向逐步执行。
每一个回调函数代码只和其儿子有关系。儿子做完之后,自动执行回调函数[父亲所写好的代码]。

所以,现在让我们理解一下所谓的嵌套的异步回调函数:
主函数的代码实际上还是按照顺序执行的。
只要是封装在回调函数里面的代码,都是要等待最深层的回调函数执行之后,才会逐一执行前一层的回调函数的代码!
另外一个理解:我不需要知道你是怎么做的,你只需要做好之后告诉我,并且告诉我结果,即可。我只要结果!
如果是要等到知道结果才可以继续做的事情,则就是要写在等待别人告诉我之后才可以做的事情列表里面(回调函数的事情);
如果是别的事情,例如上班什么的,立刻就去做,无需等待!

总结:

所谓的回调函数,就是由调用函数提供执行代码,被调用函数执行完毕之后,再自动执行的一个函数。异步式。
如果是嵌套的回调函数,就是,调用函数的回调函数嵌入到被调用函数所运行的回调函数代码之间(执行)的函数。就是callback代码中的callback函数。嵌套回调!

 

 

 发表评论


表情