JS回调函数简单易懂的入门实例分析

本文实例讲述了JS回调函数。分享给大家供大家参考，具体如下：

初学js的时候，被回调函数搞得很晕，现在回过头来总结一下什么是回调函数。什么是JS？（点击查看）

下面先看看标准的解释：

<script language="javascript">
function SortNumber( obj, func )            // 定义通用排序函数
{
    // 参数验证，如果第一个参数不是数组或第二个参数不是函数则抛出异常
    if( !(obj instanceof Array) || !(func instanceof Function))
    {
      var e = new Error();              // 生成错误信息
      e.number = 100000;               // 定义错误号
      e.message = "参数无效";             // 错误描述
      throw e;                        // 抛出异常
    }
    for( n in obj )                       // 开始排序
    {
      for( m in obj )
      {
        if( func( obj[n], obj[m] ) )        // 使用回调函数排序，规则由用户设定
        {
          var tmp = obj[n];                // 创建临时变量
          obj[n] = obj[m];        // 交换数据
          obj[m] = tmp;
        }
      }
    }
    return obj;                         // 返回排序后的数组
}

我们先来看看回调的英文定义：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

字面上的理解，回调函数就是传递一个参数化的函数，就是将这个函数作为一个参数传到另一个主函数里面，当那一个主函数执行完之后，再执行传进去的作为参数的函数。走这个过程的参数化的函数 就叫做回调函数。换个说法也就是被作为参数传递到另一个函数（主函数）的那个函数就叫做 回调函数。

举一个别人举过的例子：约会结束后你送你女朋友回家，离别时，你肯定会说：“到家了给我发条信息，我很担心你。” 对不，然后你女朋友回家以后还真给你发了条信息。小伙子，你有戏了。其实这就是一个回调的过程。你留了个参数函数（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的动作是主函数。她必须先回到家以后，主函数执行完了，再执行传进去的函数，然后你就收到一条信息了。

回调函数应用场景多用在使用 js 写组件时和耗时操作上面，尤其是组件的事件很多都需要回调函数的支持。

如果还是不明白，下面看一下代码：

<script type="text/javascript">
    function title(value){//这是回调函数！！！！
        alert(value);
    }
    function main(title, value){//这个主函数:在参数列表中，title作为一个参数传递进来，也就是上文说的 参数化函数；然后value这个值正是title（）函数中所需要的。
        alert("我是主函数");
        title(value);//结果为：'我是回调函数'。——————然后在这行这个title()，它就是回调函数咯。
    }
    main(title,"我是回调函数");//title参数加上()后，就会变回一个函数，并会被执行一次。
    //PS:看清楚，调用的是main()函数，意味着先执行main()，这时已经执行了主函数，title()被main()在函数体中执行了一次，因此title()是回调函数。
</script>

回调函数易混淆点——传参：

一，将回调函数的参数作为与回调函数同等级的参数进行传递。

二，回调函数的参数在调用回调函数内部创建。

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 告诉你什么是javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.Function对象包含一个字符串,字符串包含函数的javascript代码.假如你是从C语言或者java语言转过来的,这也许看起来很奇怪,代码怎么可能是字符串?但是对于javascript来说,这很平常.数据和代码之间的区别是很模糊的. //可以这样创建函数 var fn = new Functio

  • Javascript基于AJAX回调函数传递参数实例分析

    本文实例讲述了Javascript基于AJAX回调函数传递参数的方法.分享给大家供大家参考,具体如下: 前面介绍了<javascript实现html页面之间参数传递的四种方法>,这里针对ajax参数传递做一分析. 在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1){ //do somet

  • js中回调函数的学习笔记

    回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子 1.基本方法 <script language="javascript&q

  • javascript 自定义回调函数示例代码

    如果你直接在函数a里调用的话,那么这个回调函数就被限制死了.但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数.如果你写成了functiona(){...;b();}就失去了变量的灵活性. 复制代码 代码如下: function a(index,callback){ callback(index); } function b(index){ alert(index); } a(10000,b);

  • js 异步操作回调函数如何控制执行顺序

    需求: fun A() { asyn(parm1, parm2, onsuccess(){ }) ;} fun B() {asyn(paem1, parm2, onsuccess(){}) ;} 函数B要求执行在函数A之后 异步执行 如果直接使用 A(); B(); 是不能够满足执行条件的. 考虑将B作为回调函数传递给A,然后A再执行的onsucess中执行B函数 A(B); 即可实现功能需求. js是单线程的. 1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的

  • Javascript中的回调函数和匿名函数的回调示例介绍

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 匿名函数自调的意义: 1.营造了一个封闭的空间 2.防止变量冲突 3.有选择性的对外开发(第三方框架都是对js这样封装

  • JS动态插入并立即执行回调函数的方法

    本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 浅析JS中回调函数及用法

    回调函数,什么是回调函数呢?很多初学者都不是很明白,感觉懵懵的,不理解,更不会用! 其实简单理解的话就是在一个函数执行完毕后,得到想要的特定数据后在去执行的函数,并没有性药中的那么高深! function getdata(callback){ //这里我们假设是从后端获取数据 setTimeout(function(){ //假设我们获取到数据info var info = { "id":1, "name":'张三' } //得到数据以后执行函数方法 callbac

  • javascript 基础篇3 类，回调函数，内置对象，事件处理

    javascript 基础篇3 类，回调函数，内置对象，事件处理

    复制代码 代码如下: function 类名(参数表){ this.属性; ...... this.函数; } 这样,函数和数据成员都是用"this."来实现. 我们自己定义一个简单类student好了,然后再去构造它,并且实现一个输出函数. 复制代码 代码如下: <script LANGUAGE="JavaScript"> <!-- function student(a,b){ this.name = a; this.age=b; this.ou

  • 关于javascript 回调函数中变量作用域的讨论

    1.背景 Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数, 实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数. 在使用DWR的时候,回调函数可以作为第一个或者最后一个参数出现,如: JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR的推荐方式 //或者 myDwrSer

随机推荐