您的位置:首页 > Web前端 > javascript > 正文

js回调函数

更多 时间:2014-12-5 类别:Web前端 浏览量:556

js回调函数

js回调函数

一、什么是Javascript 回调函数?

 

  • 1、函数和其他数据一样可以被赋值,删除,拷贝等,也可以把函数作为参数传入到另一个函数中。回调函数,其实就是把函数作为参数传到函数中去运用。
  •  
  • 2、回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。
  •  
  • 3、因为函数在Javascript中是第一类对象,我们像对待对象一样对待函数,因此我们能像传递变量一样传递函数,在函数中返回函数,在其他函数中使用函数。当我们将一个回调函数作为参数传递给另一个函数是,我们仅仅传递了函数定义。我们并没有在参数中执行函数。我们并不传递像我们平时执行函数一样带有一对执行小括号()的函数。

    4、需要注意的很重要的一点是回调函数并不会马上被执行。

  •  
  •  
  • 二、回调函数将在以下几个方面帮助你:

  • 1、 避免重复代码
  • 2、 在你拥有更多多功能函数的地方实现更好的抽象(依然能保持所有功能)
  • 3、 让代码具有更好的可维护性
    4、使代码更容易阅读
    5、 编写更多特定功能的函数
  •  
  •  
  • 三、回调函数的使用场合
  •  
  • 1、资源加载:动态加载js文件后执行回调,加载iframe后执行回调,ajax操作回调,图片加载完成执行回调,AJAX等等。
  •  
  • 2、链式调用:链式调用的时候,在赋值器(setter)方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器(getter)相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针,如果要实现链式方法,可以用回调函数来实现。
  • 3、setTimeout和setInterval方法

  • 4、异步调用(例如读取文件,进行HTTP请求,等等)
  •  
  •  
  • 四、回调函数在Jquery中的应用非常普遍
  •  
  • 例如
  •  
  • 
    //注意到click方法中是一个函数而不是一个变量
    //它就是回调函数
    
    $("#btn_1").click(function() {
      alert("Btn 1 Clicked");
    });    
    
    					
  • 上面的例子中看到的,我们将一个函数作为参数传递给了click方法。click方法会调用(或者执行)我们传递给它的函数。这是Javascript中回调函数的典型用法,它在jQuery中广泛被使用。 
  •  
  • 又如
  •  
  • 
    var friends = ["Mike", "Stacy", "Andy", "Rick"];
    
    friends.forEach(function (eachName, index){
    console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
    });
    
    			
  •  
  • 上面的例子中,一个匿名函数(没有名字的函数)作为参数传递给了forEach方法。 
  •  

    五、允许多重回调函数

    我们可以将不止一个的回调函数作为参数传递给一个函数,就像我们能够传递不止一个变量一样。

    jQuery中AJAX函数就是典型:

  •  
  • JScript 代码   复制
  • 
    function successCallback(){
        //在发送之前做点什么
    }     
    
    function successCallback(){
      //在信息被成功接收之后做点什么
    }
    
    function completeCallback(){
      //在完成之后做点什么
    }
    
    function errorCallback(){
        //当错误发生时做点什么
    }
    
    $.ajax({
        url:"http://fiddle.jshell.net/favicon.png",
        success:successCallback,
        complete:completeCallback,
        error:errorCallback
    
    });
    
    		
  •  

    六、创建自己的回调函数

  •  
  • JScript 代码   复制
  • 
        function genericPoemMaker(name, gender) {
            console.log(name + " is finer than fine wine.");
            console.log("Altruistic and noble for the modern time.");
            console.log("Always admirably adorned with the latest style.");
            console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
        }
    
            //callback,参数的最后一项,将会是我们在上面定义的genericPoemMaker函数
            function getUserInput(firstName, lastName, gender, callback) {
                var fullName = firstName + " " + lastName;
    
                // Make sure the callback is a function
                if (typeof callback === "function") {
                // Execute the callback function and pass the parameters to it
                callback(fullName, gender);
                }
            }    
    
    
    
        //调用getUserInput函数并将genericPoemMaker函数作为回调函数:   
        getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
    
        // 输出
    
    			 Michael Fassbender is finer than fine wine.  Altruistic and noble for the modern time.  Always admirably adorned with the latest style.  A Man of unfortunate tragedies who still manages a perpetual smile.  
  • 因为getUserInput函数仅仅只负责提取数据,我们可以把任意回调函数传递给它。例如,我们可以传递一个greetUser函数:

  •  
  • JScript 代码   复制
  • 
    unction greetUser(customerName, sex)  {
       var salutation  = sex && sex === "Man" ? "Mr." : "Ms.";
      console.log("Hello, " + salutation + " " + customerName);
    }
    
    // 将greetUser作为一个回调函数
    getUserInput("Bill", "Gates", "Man", greetUser);
    
    // 这里是输出
    Hello, Mr. Bill Gates
    
    		
  •  

    标签:回调函数