回调函数

回调函数

• 把 函数 A 通过参数的形式 传递给 函数B, 在函数B 内部以形参的方式调用 函数 A就叫叫做 函数 B 的 回调函数
• 通常用在 异步代码的封装时 最为常 见

 // 函数 A 
 function A (){
    console.log('很好, 你呢?')
 }

 //函数 B
 function B (hei){
     console.log('你今天好吗?')
     hei()  //此时就是在 函数 B 内部 调用 函数 A
 }

// 执行调用 函数 B(A) 且传递 实参 函数A
   B(A)

 // 那么 此时 函数 A 就是 函数 B 的 回调函数

异步代码 封装 回调函数案例二

    //封装异步代码
        function fu(lose, win) {
            //设置随机数 (生成  0~1 向下取整 * 3000 0 ~ 2700 ) + 1500 
            const timer = Math.floor(Math.random() * 3000) + 1500
            // 设置延时器 
            setTimeout(() => {
            // 判断 随机生成的延时器时间 timer> 3000 毫秒时 表示链接失败 调用函数 fun 打印
                if (timer > 3000) {
                   lose()
              // 判断 随机生成的延时器时间 timer> 3000 毫秒时 表示链接成功 调用函数 fun1 打印
                } else {
                    win()
                }
            }, timer)
        }
      // 函数 fun 和 fun1 
        function fun() {
            console.log('网络申请失败, 请重新申请')
        }
        function fun1() {
            console.log('申请成功, 欢迎访问')
        }

      // 调用函数 fn 传递 实参 fun  和  fun1  对应 形参 lose(失败) 和 win(成功))
       fu(fun ,fun1)
  
      // 此处 也可以 使用 箭头函数 书写 这样写 就删除上面的 fun 和 fun1

      fn(
        /**
         *  fn( 
         *   实参1
         *   , 
         *   实参2
         * )
         *  为了理解方便带上 函数 名 不然可以 不写 因为
         *  函数 调用 时 实参  和 形参 时 一一对应 的 
        */
    
        fun()=>{
           console.log('网络申请失败, 请重新申请')   
           fn(
             fun()=>{
            console.log('第二次网络申请失败, 请重新申请')
               fn(
                fun()=>{
                 console.log('第三次网络申请失败, 请重新申请')
                },
                fun1()=>{
                    console.log('第三次申请成功, 欢迎访问')
                }
               )
             },
             fun1()=>{
               console.log('第二次申请成功, 欢迎访问')
             }
           )
        },
        fun1()=>{
             console.log('申请成功, 欢迎访问')
        }
      )