简单理解JS回调函数(callback)
一、回调函数到底是什么?
其实回调函数(没有调用也会执行)就是一个参数,把这个参数传到另一个函数里面,也就是主函数里面,当主函数里面的事情干完再回头去执行当做参数传进去的回调函数,回头去调用,这就是回调的概念。
举一个别人举过的例子:约会结束后你送你女朋友回家,离别时,你肯定会说:“到家了给我发条信息,我很担心你。” 对不,然后你女朋友回家以后还真给你发了条信息。小伙子,你有戏了。其实这就是一个回调的过程。你留了个参数函数(要求女朋友给你发条信息)给你女朋友,然后你女朋友回家,回家的动作是主函数。她必须先回到家以后,主函数执行完了,再执行传进去的函数,然后你就收到一条信息了。
接下来我们用代码更清晰的理解一下回调的概念:
<script> //定义主函数,回调函数作为参数 function A(callback) { callback(); console.log('我是主函数'); } //定义回调函数 function B() { setTimeout("console.log('我是回调函数')",2000);//即使此时时间设置为0,也会先输出主函数 } //调用主函数,将B传进去 A(B); </script>
//输出结果
从以上代码可以看出,我们先执行的回调函数callback(),但是输出的时候却是后输出回调函数里面的内容,由此可以证实上面的说法,要等到主函数里面的事情干完再回头去执行回调函数。
二、了解JS的执行机制
- 先执行执行栈里面的同步任务
- 异步任务(回调函数)放入任务队列中
- 同步任务结束,按次执行异步任务,异步任务进入执行栈开始执行
我们都知道js是单线程的,这种设计模式给我们带来了很多的方便之处,我们不需要考虑各个线程之间的通信,也不需要写很多烧脑的代码,也就是说js的引擎只能一件一件事的去完成和执行相关的操作,所以所有需要执行的事情都像排队一样,等待着被触发和执行,可是如果这样的话,如果在队列中有一件事情需要花费很多的时间,那么后面的任务都将处于一种等待状态,有时甚至会出现浏览器假死现象,例如其中有一件正在执行的一个任务是一个死循环,那么会导致后续其他的任务无法正常执行,所以js在同步机制的缺陷下设计出了异步模式
在异步执行的模式下,每一个异步的任务都有其自己一个或着多个回调函数,这样当前在执行的异步任务执行完之后,不会马上执行事件队列中的下一项任务,而是执行它的回调函数,而下一项任务也不会等当前这个回调函数执行完,因为它也不能确定当前的回调合适执行完毕,只要引它被触发就会执行,
三、常见的回调函数
1、dom事件回调函数(如点击按钮事件的函数)
//click方法中是一个函数而不是一个变量
$("#btn").click(function() {
alert("我是回调函数");
});
//或者
function click() {
alert("我是回调函数");
}
2、定时器回调函数(如上)
3、ajax请求回调函数
4、生命周期回调函数
如 onLoad、 start 、update、 lateUpdate、 onDestroy 、onEnable、 onDisable
(有关生命周期回调函数可以查阅https://www.cnblogs.com/allyh/p/9502918.html)