本文主要介绍了个人对于javascript中回调函数的理解和使用方法及示例,需要的朋友可以参考下
 

现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途。我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题“js的回调函数”相关的东西。

说起回调函数,好多人虽然知道意思,但是还是一知半解。至于怎么用,还是有点糊涂。网上的一些相关的也没有详细的说一下是怎么回事,说的比较片面。下面我只是说说个人的一点理解,大牛勿喷。我们来看一下一个粗略的一个定义“函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。”,这句话的意思是函数b以一个参数的形式传入函数a并执行,顺序是先执行a ,然后执行参数b,b就是所谓的回调函数。我们先来看下面的例子。

复制代码代码如下:
   function  a(callback){
      alert('a');
      callback.call(this);//或者是 callback(),  callback.apply(this),看个人喜好
   }
   function  b(){
       alert('b');
   }
   //调用
   a(b);

这样的结果是先弹出 'a',再弹出‘b'。这样估计会有人问了“写这样的代码有什么意思呢?好像没太大的作用呢!”

是的,其实我也觉得这样写没啥意思,“如果调用一个函数就直接在函数里面调用它不就行了”。我这只是给大家写个小例子,做初步的理解。真正写代码的过程中很少用这样无参数的,因为在大部分场景中,我们要传递参数。来个带参数的:

复制代码代码如下:
function  c(callback){
      alert('c');
      callback.call(this,'d');
    }
//调用
c(function(e){
    alert(e);
});

这个调用看起来是不是似曾相识,这里e参数被赋值为'd',我们只是简单的赋值为字符窜,其实也可以赋值为对象。Jquery里面是不是也有个e参数,下面我们就来讲讲
Jquery里面的e参数是如何被回调赋值的。

Jquery框架我想大家不陌生了,出来了好久,开发的时候都在用,比较简单,api网上搜起来很方便,上手快。在Jquery框架下,我们有时候要获取事件中的一些参数,比如我要获取当前点击的坐标,点击的元素对象。这个需求在Jquery里面好办  :

复制代码代码如下:
        $("#id").bind('click',function(e){
          //e.pageX ,e.pageY ,e.target.....各种数据
        });

用起来倒是挺方便,其实这个e参数的赋值也是通过回调函数来实现的,这个参数是用回调参数给它赋予了一个对象值,仔细研究过JJquery源码的朋友应该发现了这一点。

还有Ajax里面   $.get('',{},function(data){})    data这个参数也是同样的原理。

我们来看看Jquery事件对象里面是怎么应用回调函数的。

为了方便,我简单的写了一下$相关的一些实现,之前写过“小谈Jquery”里面有比较接近框架实现的方法,我下面只是写一个简易的选择器。

复制代码代码如下:
<div  id="container"   style="width:200px;height:200px;">
</div>
<script>
     var   _$=function (id)
               { 
                     this.element=  document.getElementById(id); 
                }
       _$.prototype={
            bind:function(evt,callback)
            {
                var   that=this;
                if(document.addEventListener)
                {
                    this.element.addEventListener(evt, function(e){
                        callback.call(this,that.standadize(e));
                    }  ,false);
                }
                else if(document.attachEvent)
                {
                    this.element.attachEvent('on'+evt,function(e){
                        callback.call(this,that.standadize(e));
                    });
                }
                else
                    this.element['on'+evt]=function(e){
                        callback.call(this,that.standadize(e));
                    };
            },
            standadize:function(e){
                 var  evt=e||window.event;
                 var  pageX,pageY,layerX,layerY;
                 //pageX  横坐标  pageY纵坐标   layerX点击处位于元素的横坐标   layerY点击处位于元素的纵坐标
                 if(evt.pageX)
                 {
                     pageX=evt.pageX;
                     pageY=evt.pageY;
                 }
                 else
                 {
                    pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;
                    pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;
                 }
                 if(evt.layerX)
                 {
                     layerX=evt.layerX;
                     layerY=evt.layerY;
                 }
                 else
                 {
                     layerX=evt.offsetX;
                     layerXY=evt.offsetY;
                 }
                 return  {
                    pageX:pageX,
                    pageY:pageY,
                    layerX:layerX,
                    layerY:layerY
                 }
            }
       }
       window.$=function(id)
       {
          return  new _$(id);
       }
        $('container').bind('click',function(e){
            alert(e.pageX);
        });
        $('container1').bind('click',function(e){
             alert(e.pageX);
        });
</script>

这段代码我们主要看standadize函数的实现,兼容性的代码,就不多说了,返回的是一个对象

复制代码代码如下:
     return  {
                    pageX:pageX,
                    pageY:pageY,
                    layerX:layerX,
                    layerY:layerY
                 }

然后再看bind函数里面的代码    callback.call(this,that.standadize(e)),这段代码其实就是给e参数赋值了,是用callback回调实现的。

callback 函数被调用的时候传入的是匿名函数

复制代码代码如下:
         function(e){
        }

而callback.call(this,that.standadize(e))相当于是执行了这么一段代码

复制代码代码如下:
        (function(e){
        })(standadize(e))

这也是Jquery用回调函数比较经典的地方,e参数就是这么被赋值的,说了这些你们也大概有个了解了,以及怎么使用了。

js的回调函数详解的更多相关文章

  1. jQuery 源码解析(八) 异步队列模块 Callbacks 回调函数详解

    异步队列用于实现异步任务和回调函数的解耦,为ajax模块.队列模块.ready事件提供基础功能,包含三个部分:Query.Callbacks(flags).jQuery.Deferred(funct) ...

  2. C语言回调函数详解

    1. 什么是回调函数? 回调函数,光听名字就比普通函数要高大上一些,那到底什么是回调函数呢?恕我读得书少,没有在那本书上看到关于回调函数的定义.我在百度上搜了一下,发现众说纷纭,有很大一部分都是使用类 ...

  3. java回调函数详解

    声明:博客参考于https://www.cnblogs.com/yangmin86/p/7090882.html,谢谢哥们 回调函数:是指在A类执行代码时,调用了B类中的方法,但B类中的方法执行了A类 ...

  4. JS Date.parse() 函数详解

    Date.parse()函数用于分析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间相差的毫秒数. 该函数属于Date对象,所有主流浏览器均支持该函数. 语法 Date.pa ...

  5. 使用JS截取字符串函数详解

    一.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str=”jpg|bmp|gif|ico|png”; arr=theString.split(”|”); //a ...

  6. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  7. Jquery之each函数详解

    最近项目被each函数坑惨了,想来还是好好整理下关于each函数的方方面面,一来方便自己查阅,二来为读者提供经验和教训,废话不多说,来看看Each函数到底是怎么坑人的. 一. 全局jQuery.eac ...

  8. js调试工具Console命令详解

    这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下   一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...

  9. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

随机推荐

  1. 3.Java的基本数据类型.md

    Java支持的类型分为两类: •基本类型(Primitive Type):boolean和数值类型 ◦整型:byte.short.int.long.char ◦浮点:float.double •nul ...

  2. 吴裕雄 python 数据处理(3)

    import time a = time.time()print(a)b = time.localtime()print(b)c = time.strftime("%Y-%m-%d %X&q ...

  3. java中garadle工程没有src问题

    https://www.jb51.net/article/142791.htm 前几天遇到一个问题,就是使用ider创建gradle项目后,src目录没有自动生成出来,今天就给大家分享一下怎么解决. ...

  4. Python中的转换函数

    https://www.cnblogs.com/wuxiangli/p/6046800.html python中的字符数字之间的转换函数   int(x [,base ])         将x转换为 ...

  5. 大型运输行业实战_day11_1_aop理论与aop实际业务操作

    1.aop概述 Spring的AOP:什么叫做AOP:Aspect oritention programming(面向切面编程)什么是切面:看图,业务方法 执行前后.AOP的目的:AOP能够将那些与业 ...

  6. android TextView SetText卡顿原因

    [android TextView SetText卡顿原因] 不要用wrap_content即可. 参考:http://blog.csdn.net/self_study/article/details ...

  7. oracle 转置实现

    下面是3种方法 方法1:SYS_CONNECT_BY_PATH , ROW_NUMBER() OVER(PARTITION BY  ..  ORDER BY ..)  , START WITH , C ...

  8. jquery+jquery.pagination+php+ajax 无刷新分页

    <!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...

  9. phpstorm添加站点

    1.在界面上快捷键 ctrl+alt+s 或打开File->settings 2.找到Deployment 设置完后确定即可使用.

  10. 三:python 对象类型详解一:数字(上)

    一:python 的数字类型: a)整数和浮点数 b)复数 c)固定精度的十进制数 d)有理分数 e)集合 f)布尔类型 g)无穷的整数精度 h)各种数字内置函数和模块 二:各种数字类型的详解 1,数 ...