js中的回调函数 | 面试必问-一一网

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

前言

js中存在一种情景，就是异步操作，假如有事件a，事件b，事件c三个事件，执行顺序必须是a，b，c，那么我们就要在分别写三个函数来执行这三个事件，及先执行函数a，在a中再调用b，在b中再调用c，但是这样的做法很low，还会多出来一些没用的参数，这时候我们就可以用回调函数来解决这个问题，那什么是回调函数呢，我们下面来一一讲解。

回调函数

回调函数的定义

回调函数就是一个函数a作为实参传入另一个函数b，并在b中执行a这个函数，这就是回调函数，代码形式如下

    function b(callback){
        console.log('我是b的打印')
        callback()
    }
    b(function(){
        console.log('我是a的打印')
    })
    //执行结果是：我是b的打印   我是a的打印
复制代码

如上代码，function(){console.log(‘我是a的打印’)}，这个函数就是一个回调函数

回调函数的使用

大家一定都用过ajax吧，ajax请求的参数列表中有一个success：function(data){}函数，我们可以在这个函数中拿到请求回来的数据data，其实这就也是一个回调函数，只是封装在了ajax底层，我们看不到，下面用普通的代码来演示一遍这个逻辑

    //这里的定时器模拟接口请求后台数据
    function b(callback){
        setTimeout(function(){
            var data = '我是请求回来的数据'
            callback(data)
        },2000)
    }
    //这里的success函数就相当于ajax中的success函数
    let success = function(data){
        console.log(data)
    }
    b(success)
    //运行的结果是  我是请求回来的数据
复制代码

相信到这里你应该对回调函数有了进一步的认识，下面我们来解决开头抛出的问题，代码如下

    //下面代码中的定时器模拟接口请求后台数据的操作
    
    //a事件执行
    function a(callback){
        setTimeout(function(){
            console.log('a事件执行完毕了')
            callback && callback() //如果传入的有回调函数就执行，如果没传就不执行，没传的话这里是undefined
        },5000)
    }
    //c事件执行
    function c(){
        console.log('c事件执行完毕了')
    }

    //b事件执行
    a(function(){
        setTimeout(function(){
            console.log('b事件执行完毕了')
            c()
        },2000)
    })
    //运行结果是 a事件执行完毕了，b事件执行完毕了，c事件执行完毕了
复制代码