js中的回调函数(精华)

Posted 94Lucky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的回调函数(精华)相关的知识,希望对你有一定的参考价值。

回调函数的基础定义
 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来返回

以上是关于js中的回调函数(精华)的主要内容,如果未能解决你的问题,请参考以下文章

js中的回调函数,什么是回调函数?

理解 JS 回调函数中的 this

js中的回调函数

js中的回调函数的理解和使用方法

关于js中的回调函数callback,通俗易懂

依次执行自定义函数——Vue.js中的回调逻辑