zoukankan      html  css  js  c++  java
  • Javascript之回调函数(callback)

    1、回调函数定义: 

      回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

      在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。因此callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。

      回调函数,一般在同步情境下是最后执行的,而在异步情境下有可能不执行,因为事件没有被触发或者条件不满足。

    例:一个同步(阻塞)中使用回调的例子,目的是在func1代码执行完成后执行func2。

    var func1=function(callback){

      //do something

      (callback && typeof(callback)==="function") && callback();

    }

    例:异步回调的例子

    $(document).ready(callback);

    $.ajax({

      url: "test.html";

      context: document.body

    }).done(function(){

      $(this).addClass("done");

    }).fail(function(){

      alert("error");

    }).always(function(){

      alert("complete");

    })

    在javascript中,函数也是对象,函数是用Functon()构造函数创建的Function对象。Function对象包含一个字符串,字符串包含函数的javascript代码。这样就可以将函数作为参数传递给其他函数。

    把函数做为参数传递的例子:

    function fn(arg1,arg2,callback){

      var num=Math.ceil(Math.random()*(arg1-arg2)+arg2);

      callback(num);

    }

    fn(10,20,function(num){

      console.log("Callback called! Num:"+num);

    }) 

      传统函数以参数形式输入数据,并且使用返回语句返回值。理论上,在函数结尾处有一个return返回语句,结构上就是:一个输入点和一个输出点。这比较容易理解,函数本质上就是输入和输出之间实现过程的映射。

      但是,当函数的实现过程非常漫长,你是选择等待函数完成处理,还是使用回调函数进行异步处理呢?这种情况下,使用回调函数变得至关重要,例如:AJAX请求。若是使用回调函数进行处理,代码就可以继续进行其他任务,而无需空等。实际开发中,经常在javascript中使用异步调用,甚至在这里强烈推荐使用!

    2、回调函数的使用场合

    (1)资源加载:动态加载js文件后执行回调,加载iframe后执行回调,ajax操作回调,图片加载完成执行回调,等

    (2)DOM事件及Node.js事件基于回调机制

    (3)setTimeout的延迟时间为0,setTimeout调用的函数实际上就是一个callback的体现

    (4)链式调用:链式调用的时候,在赋值器(setter)方法中很容易实现链式调用,而取值器(getter)相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针,如果要实现链式方法,可以用回调函数来实现setTimeout、setInterval的函数调用得到其返回值。由于两个函数都是异步的,即:他们的调用时序和程序的主流程是相对独立的,所以没有办法在主体里面等待它们的返回值,它们被打开的时候程序也不会停下来等待,否则也就失去了setTimeout及setInterval的意义了,所以用return已经没有意义,只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。

    3、回调函数的传递

    $.get('myhtmlpage.html',myCallBack); //这是对的

    $.get('myhtmlpage.html',myCallBack('foo','bar'));   //这是错的,若要带参数实现如下

    $.get('myhtmlpage.html',function(){

      //带参数的函数表达式

      myCallBack('foo','bar');

    });

    另,最好保证回调函数存在并且必须是函数引用或者函数表达式:

    (callback&&typeof(callback)==="function")&&callback();

    参考原文:http://www.jb51.net/article/54750.htm

     

  • 相关阅读:
    JavaScript
    94.Binary Tree Inorder Traversal
    144.Binary Tree Preorder Traversal
    106.Construct Binary Tree from Inorder and Postorder Traversal
    105.Construct Binary Tree from Preorder and Inorder Traversal
    90.Subsets II
    78.Subsets
    83.Merge Sorted Array
    80.Remove Duplicates from Sorted Array II
    79.Word Search
  • 原文地址:https://www.cnblogs.com/xuepei/p/5013334.html
Copyright © 2011-2022 走看看