js中的回调函数(精华)

Posted 2020-12-16 94Lucky

回调函数的基础定义

 function fn1(f){
       f();
       fn2();
    }
 function fn2(){
    console.log("aaa");
     }
  fn1(fn2);   //定义:函数的名字作为另外一个函数的参数传入，叫做回调函数

回调的误区

function fn1(){
      console.log("aaa");
      fn2();
}
function fn2(){
      console.log("bbb");
      fn1();           //这种方式不是回调函数，是函数在函数中执行。
}

下面带上一个回调函数实现的简单计算器，可以比较一下和普通写法的区别

             function fns (a,b,fn){
             if(isNaN(a) || isNaN(b)) return "错误的数据";
             return fn(a,b);
             }
         
             function fn1(a,b){
                     return a+b;
                 }
                 function fn2(a,b){
                     return a-b;
                 }
                 function fn3(a,b){
                     return a*b;
                 }
                 function fn4(a,b){
                     if(b===0)  return "除数不能为0";
                     return a/b;
                 } 
             console.log(fns(3,4,fn1));  
      //尽管要麻烦一点，但这就是函数的模块化，可以实现更多功能

回调函数的适用场景

1)某件事的处理需要等待时，设置回调
setTimeout  注意:函数参数的传入
2)不关心具体后续需要处理的事情时，设置回调

下面写个红绿灯的例子，看看适用场景。

      function setLight(){
             // 红             黄           绿
             arguments[0](arguments[1],arguments[2])
         }
         //                黄  绿             
         function redLight(fn,fn2){
             console.log("红灯");
         //           执行黄    参数绿   参数红    黄(绿，红)
             setTimeout(fn,2000,fn2,arguments.callee)
         }
         //                   绿   红
         function yellowLight(fn,fn2){
             console.log("黄灯");
         //            执行绿   参数红    参数黄     绿(红，黄)  
             setTimeout(fn,2000,fn2,arguments.callee)
         }
         //                 红   黄
         function greenLight(fn,fn2){
             console.log("绿灯");
             //       执行红    参数黄      参数绿   红(黄，绿)
             setTimeout(fn,2000,fn2,arguments.callee)
         }
         setLight(redLight,yellowLight,greenLight);          
      //这个例子是较难的，但是很经典的，具体的回调理解方法，仔细看注释

红绿灯的一体同归方法

         function redLight(b,c,a){
              setTimeout(function(){
                  console.log("红灯");
                  b(c,a,b)
              },1000)
          }
          function yellowLight(c,a,b){
              setTimeout(function(){
                  console.log("黄灯");
                  c(a,b,c)
              },1000)
          }
          function greenLight(a,b,c){
              setTimeout(function(){
                  console.log("绿灯");
                  a(b,c,a)
              },1000)
              
          }
     redLight(yellowLight,greenLight,redLight);
    //这个也是红绿灯

两个红绿灯，很明显第一个比较简单。
再来个例子说明下利用回调函数实现循环的。

      var i=0;sum=0;
         function fn1(fn){
             i++;
             if(i>100) return sum;
             return fn(fn1);
         }
         function fn2(fn){
             sum+=i;
             return fn(fn2);
         }
         var s=fn1(fn2);
         console.log(s);
      //因为互相回调，所以每个回调都得写erturn来返回