回调函数

什么是回调函数？

一个函数，作为参数的形式传给另一个函数调用，那么这个这个函数就叫做回调函数。当然回调函数很常见，如下

  let array = [{ name: 'bob' }, { name: 'cindy' }, { name: 'linda' }]
  array.map((item, index) => {
      console.log(item.name, index)
  })

我们常用的map方法中传入的参数就是一个回调函数。当然还有forEach()方法等...

我们再看一个例子

     /**
     getData接收两个参数，一个是数据对象 另一个是函数logName。在getData函数内部调用传入的函数
     并把option参数再作为参数传给logName
     **/
    let allUserName = []

    function logName(data) {
        console.log(data)
    }
     // 此处的callback也就是logName函数
    function getData(options, callback) {
        allUserName.push(options)
        console.log(allUserName)
        callback(options)   // 回调函数
    }

    getData({ name1: "Russ", name2: "Harden" }, logName)

匿名函数

在map中我们传入的函数为什么没有名字？那么就引出了匿名函数。

  array.map((item, index) => {
      console.log(item.name, index)
  })

匿名函数就是没有名字的函数。

如下当我们声明一个如下的匿名函数时是会报错的

  function (){
    console.log("张培跃");
   }

但是声明一个箭头函数形式的匿名函数是不会报错的

(a) => {
   console.log(a)
 }

那么对于普通函数的声明的匿名函数报错怎么办？用()包起来。当然最好箭头函数也用()包起来

  (function (){
    console.log("aaa");
    })

立即执行

  (function (){
    console.log("张培跃");
    })()
  // 也可以传递参数  
    (function (a){
    console.log(a);
    })('aa')

回调地狱

好比省市区，我先拿到了省，然后我根据省去请求市、然后根据市去请求地区。这就需要嵌套三层。

    ajax1(url,(res)=>{
        ajax2(res.url,(res1)=>{
            ajax3(res.url,(res2)=>{
                console,log(res2)
            })
        })
    })

回调地狱也就是出现了多层的嵌套。

还有一个恰当的比喻，妈妈让我做家务。先洗衣服需要3分钟、然后拖地2分钟、整理桌子1分钟、浇花1分钟...

  //我们这里用 秒模仿一分钟
  function washCloth(fn){
         // 无论我们fn传入什么这里是写死的fn('洗衣服')
        setTimeout(()=>{
            fn('洗衣服')
        },3000)
    }
    function mopFloor(fn){
        setTimeout(()=>{
            fn('拖地')
        },2000)
    }
    function desk(fn){
        setTimeout(()=>{
            fn('整理桌子')
        },1000)
    }
    function washFlower(fn){
        setTimeout(()=>{
            fn('浇花')
        },1000)
    }
          // 先执行洗衣服的函数
        washCloth(function(data1){
            console.log(data1)
            // 执行完洗衣服 我们拖地
            mopFloor(function(data2){
                console.log(data2)
                desk(function(data3){
                    console.log(data3)
                    washFlower(function(data4){
                        console.log(data1,data2,data3,data4)
                    })
                })
            })
        })
        
        //  洗衣服   3s
        //  拖地     3s + 2s
        //  整理桌子  3s + 2s + 1s
        //  洗衣服 拖地 整理桌子 浇花  3s+2s+1s+1s

如果还有其他家务，我们就需要一层一层的嵌套。这会影响到代码的可读性和维护。

怎么解决回调地狱我们下一篇文章再去了解