什么是回调函数?回调函数的应用举例

关于新手学习回调的一点心得

学习了前端几个月来,自己一直在文件夹和word有记录,但是总归是要养成写博客和git的习惯会好归于整理。
回归今天主题,回调函数是js里一个比较常用和新手容易忽略深入学习的函数,其实回调在实际开发中经常可用,比如做一个幻灯片,选项卡,再举例到最基本的跨域请求,都有回调的影子。

回调函数定义

百度百科中这样定义:回调函数就是一个通过函数指针调用的函数。
而我更愿意这样定义:函数A作为参数(函数引用)传递到另一个函数B中,函数B执行函数A。我们就说函数A叫做回调函数。特殊地,如果没有名称(函数表达式),就叫做匿名回调函数。
有同学会问:函数也可以是一个参数吗?就好比我们中学学过的f(x)=x^2,周所周知x是一个参数,f(x)是他对应的具体值。但在js里,f(x)也可以作为一个参数来使用,前提是他作为另一个函数的值域。也即是有一点特殊的复合函数的意思,但那是最基本的用法了,没什么特殊功能。
一个回调机制里包含主函数,回调函数和中间函数。
如果看定义看不明白,不妨让我们看看代码:

//定义一个回调函数
a=function(x){
    console.log(x^2)
}
//定义一个中间函数
b=function(x,func){
    console.log(1+func(x))
}
//定义一个主函数
c=b(x,a)
var x=1
//执行
c()

如果还想更直白点,可以参考这个代码:

function getdata(callback){    //这里我们假设是从后端获取数据
    setTimeout(function(){     //假设我们获取到数据info     
    var info = {
        "id":1, 
        "name":'张三'
        }     
         callback(info)
    },1000}
         

回调函数的应用

作者:裴珞嘉
链接:https://www.jianshu.com/p/20bba257ccbd
来源:简书

资源加载:动态加载js文件后执行回调,加载iframe后执行回调,ajax操作回调,图片加载完成执行回调,AJAX等等。

DOM事件及Node.js事件基于回调机制(Node.js回调可能会出现多层回调嵌套的问题)。

setTimeout的延迟时间为0,这个hack经常被用到,settimeout调用的函数其实就是一个callback的体现。

链式调用:链式调用的时候,在赋值器(setter)方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器(getter)相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针,如果要实现链式方法,可以用回调函数来实现。

setTimeout、setInterval的函数调用得到其返回值。由于两个函数都是异步的,即:他们的调用时序和程序的主流程是相对独立的,所以没有办法在主体里面等待它们的返回值,它们被打开的时候程序也不会停下来等待,否则也就失去了setTimeout及setInterval的意义了,所以用return已经没有意义,只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。

在这里我是引用了另一个大佬的回答,毕竟人家经验比我丰富,我开发网页的时候遇到的一些回调上述都有记载,最常用的就是资源加载和setTimeout。

发布了12 篇原创文章 · 获赞 0 · 访问量 1120

猜你喜欢

转载自blog.csdn.net/weixin_45931321/article/details/104049574