最近做的一个项目中用到了callback函数,于是就研究了下总结下我对javascript callback的理解 首先从callback的字面翻译“回调” 可以理解这是一个函数被调用的机制

当我们遇到一个名词首先可能是百度谷歌搜索看官方是怎么解释的
下面是维基百科对回调的定义:

a callback is a piece of executable code that is passed as an argument to other code which is expected to call back (execute) the argument at some convenient time
硬翻译:一个回调函数是作为另一个函数的参数的一个可执行的代码段 这个代码段在方便的时间来执行
通俗形象的解释:把函数f2当做一个参数传给函数f1 并且在f1里适当的时间执行f2(下面的所有例子我都用f1,f2表示)

所以我们可以得到一个这样的回调函数模式

function f1(f2) {

    //f1要执行的一些代码

    if (f2 && typeof(f2) === "function") { //对f2做判断是否存在并且是一个函数
f2();
} }

这里要注意两点 参数里的f2是一个指向f2这个函数的指针所以f2后面不能加括号
而f1内部的f2后面要有括号 因为这时我们要调用执行f2 ,所以要写f2()

我们把这个模式实例化看下他的执行结果

声明函数

function f1(f2) {
alert("我是f1");
if (f2 && typeof(f2) === "function") { //写上判断是个好习惯
f2()
}
} 执行 f1(function() {
alert("我是f2");
}) 结果:
//"我是f1",“我是f2”

我们看下整个函数执行的过程 当调用 f1(function(){alert("我是f2");})的时候
首先把一个匿名函数传给了f1() 而这个匿名函数就是声明函数里的参数f2 javascript程序是从上到下执行 先执行了alert("我是f1"); 然后执行了f2();

那我们可不可以这样写呢

function f1(f2) {
alert("我是f1");
if (f2 && typeof(f2) === "function") {
f2()
} alert("我又是f1 哈哈");
}
执行
f1(function(){
alert("我是f2");
}) //结果:我是f1 ,我是f2,我又是1 哈哈

再看对callback的定义 ,我们可以让callback在我们想要执行的时候执行,不影响f1本身的执行流

但为了封装和美观大多数我们会这样写

function f1(f2){

    if (f2 && typeof(f2) === "function") {
settimeOut(function(){f2()},1000) ;//f1执行1s后f2执行
}
} function f2(){
/**/
} f1(f2);

  

我们平常会经常用到callback

比如jQuery里的一个例子

$("#div1").fadeOut("fast",functin(){
$("#div2").fadeIn("slow");
})

让#div快速隐藏然后让#div2渐渐显示,在jQuery里有大量的callback函数

并且有一个专门的有一个方法callbacks来管理

jQuery.Callbacks = function( options ) {...}

最后说下我最在项目中用到的callback吧
hybrid app 功能大概就是 我向ios发送一个请求 ios返回给我的json数据 然后我将返回的数据解析插入到web页面上

//首先我写一个javascript和ios通信callback函数(简化)
getData(callback){
settimeOut(function(){callback(iso_return)},100);
} //然后我向ios发送一个请求
function getSinersReuest(){
window.location.href="vvmusic://....callback=getSinersData"
}
/*然后ios截获url中的callback执行getData(getSinersData)返回给我数据;getSinersData是把ios返回的json插入到页面显示*/ getSinersData(iso_return){
.........
} //当页面加载的时候调用
window.onload=function(){
getSinersReuest();
}

javascript callback函数的理解与使用的更多相关文章

  1. javascript 匿名函数的理解(转)

    原网址 http://www.jb51.net/article/21948.htm javascript 匿名函数的理解(透彻版) 代码如下: (function(){ //这里忽略jQuery所有实 ...

  2. javascript 匿名函数的理解,js括号中括function 如(function(){})

    代码如下: (function(){  //这里忽略jQuery所有实现  })();  (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也 ...

  3. 【repost】对JAVASCRIPT匿名函数的理解(透彻版)

    Query片段: view plaincopy to clipboardprint? (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其 ...

  4. 对JAVASCRIPT匿名函数的理解

    网上很多解释,我无法理解,我想知道原理...这篇文章应该可以透彻一点 Query片段: (function(){ //这里忽略jQuery所有实现 })(); 要说匿名函数,我们首先要由函数本身说起. ...

  5. JavaScript回调函数的理解

    这里是个人对回调函数的一段理解 <!DOCTYPE html> <html> <head> <title>回调函数</title> < ...

  6. 玩转JavaScript Callback函数

    如果你对Jquery没有足够的经验,但是你又用过JQuery,这么来说没你已经用过了回调函数了.但是你可能不知道它是如何工作和实现的. 这篇文章主要基于我所了解的回调函数,我试图启发大家基于最常规的J ...

  7. JavaScript闭包函数的理解

    闭包就是一个函数能够访问其函数外部作用域中的变量,即在外面可以调用函数中的函数的变量,其实他就是将函数内外部连接起来的桥梁 闭包三大特点: 1. 函数嵌套函数 2. 内部函数可以访问外部函数的变量 3 ...

  8. JavaScript callback function 回调函数的理解

    来源于:http://mao.li/javascript/javascript-callback-function/ 看到segmentfault上的这个问题 JavaScript 回调函数怎么理解, ...

  9. JavaScript callback function 理解

    看到segmentfault上的这个问题 JavaScript 回调函数怎么理解,觉得大家把异步和回调的概念混淆在一起了.做了回答: 我觉得大家有点把回调(callback)和异步(asynchron ...

随机推荐

  1. bzoj 1041 圆上的整点 分类: Brush Mode 2014-11-11 20:15 80人阅读 评论(0) 收藏

    这里先只考虑x,y都大于0的情况 如果x^2+y^2=r^2,则(r-x)(r+x)=y*y 令d=gcd(r-x,r+x),r-x=d*u^2,r+x=d*v^2,显然有gcd(u,v)=1且u&l ...

  2. 如何撰写SCI论文的讨论部分?——经典结构 – 俗称“倒漏斗型。

  3. RVA与Offset的换算函数

    function RVAToFileOffset(FileName:string; RVA: Cardinal): Cardinal; var   MemPE: TFileStream;   PEDo ...

  4. smarty模板技术

    一.什么是smarty?smarty是一个使用php写出来的模板php模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用php程序员同美工分离,使用的程序员改变程序的逻辑内容不会影响到美 ...

  5. awk 统计数据在文件中的出现次数

    突然发现awk原来可以统计同一数据在要处理的文件中所出现的次数.原来的时候为了分析数据还自己写程序,哎,无语,当时还以为自己多强,手工分析不过来的东西写程序处理.现在想来实在是年少轻狂.解决问题嘛,不 ...

  6. JavaScript事件委托的技术原理

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  7. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

  8. C#正则表达式大全{转}

    只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n}$". 只能输入至少n位的数字:"^\d{n,}$". 只能输入m~ ...

  9. 谈谈arm下的函数栈

    引言 这篇文章简要说说函数是怎么传入参数的,我们都知道,当一个函数调用使用少量参数(ARM上是少于等于4个)时,参数是通过寄存器进行传值(ARM上是通过r0,r1,r2,r3),而当参数多于4个时,会 ...

  10. Sqli-labs less 58

    Less-58 执行sql语句后,并没有返回数据库当中的数据,所以我们这里不能使用union联合注入,这里使用报错注入. Payload:http://127.0.0.1/sqli-labs/Less ...