JavaScript中的回调函数callback

JS 专栏收录该内容
28 篇文章 1 订阅

解释

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

以上callback的英文解释,非常清晰简明,有时候英文理解要比翻译成中文二次理解更清楚。大概意思是:回调是一个函数,它作为参数传递给另一个函数,并在其父函数完成后执行。
其实函数也是一种数据类型,既可以当作参数进行传递,也可以当作方法的返回值传递


先明白异步和同步

想要理解清楚callback还是需要先把异步async/同步sync概念弄清楚。
先写一个异步小例子:

    function a(){
        console.log('我是函数a开头')

        setTimeout(function () {
            console.log('我是setTimeout')
        },1000)

        console.log('我是函数a结尾')
    }

    function b(){
        console.log('我是函数b')
    }

    a()
    b()

执行结果:
在这里插入图片描述

从执行结果可以看出来执行顺序是之上而下执行下来,但setTimeout函数被放在了最后执行。这是一个异步操作,执行的时候并不会等待setTimeout而直接向下执行,等到所有任务执行完成在回过头来执行setTimeout函数。即使setTimeout第二个参数是0也会最后执行,setTimeout第二个参数的数字是表示执行最快时间不是一个确定时间。


理解

  回调函数字面上理解下来就是,回调就是一个函数的调用过程。函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。字面意思也很好理解:回调,回调,就是回头调用的意思。函数a的事先干完,回头再调用函数b。
  需要注意的是:所以回调与同步、异步并没有直接的联系,回调只是一种实现方式,既可以有同步回调,也可以有异步回调,还可以有事件处理回调和延迟函数回调,这些在我们工作中有很多的使用场景
  所以其实并不是我们不认识回调函数,而是我们都萦绕在了这个“callback“ 这个词上,当你在一个函数中看到它是就会困惑,其实它只是一个形参名字而已。

回调函数其实我们平时都使用过,来看看下面几个经典的:

ajax中的回调函数:
在这里插入图片描述

点击事件的回调函数:
在这里插入图片描述

数组中遍历的回调函数:
在这里插入图片描述

作用

大多数情况下,callback是用来拿到函数中的数据,这牵扯到闭包的概念,可以看这篇文章:javaScript里的闭包到底是什么?该怎么理解?

就以Ajax的封装为例吧:

  var oReq = new XMLHttpRequest()

        oReq.onload = function () {
            console.log(oReq.responseText)
        }
        oReq.open("get",url,true)
        oReq.send()

上面的是为封装的Ajax,我们请求到的数据responseText只能在onload中拿到,想要拿数据进行下一步操作也只能在onload函数中进行。但我们如果要封装给其他人使用,我们并不知道使用者需要拿这数据干什么,因此我们需要把responseText传递出去,这时候就需要使用callback。

    function get(url,callback){
        var oReq = new XMLHttpRequest()

        oReq.onload = function () {
//            console.log(oReq.responseText)
            callback(oReq.responseText)
        }
        oReq.open("get",url,true)
        oReq.send()
    }

    get('data.json', function (data) {
        console.log(data)
    })

上面这是封装以后的代码,我们通过callback把responseText传递出去,get方法的第二个参数就是回调函数callback,而data就是callback函数传递出来的responseText数据,通过回调函数拿到数据,使用者需要拿数据干什么都行了。

  • 3
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值