如果你对Jquery没有足够的经验,但是你又用过JQuery,这么来说没你已经用过了回调函数了。但是你可能不知道它是如何工作和实现的。
这篇文章主要基于我所了解的回调函数,我试图启发大家基于最常规的JavaScript技术之上。也许一些Javascript的专家可以告诉我那些遗漏了。

什么是回调函数?

下面是维基百科文章定义的回调函数:
"A reference to executable code, or a piece of executable code, that is passed as an argument to other code."
下面是一段大家都熟悉的JQuery代码:
$('#element').fadeIn('slow', function() {  
    // callback function  
});  
  这里是调用了JQuery里的fadeIn()方法,这个方法接受两个参数:淡入的速度和一个可选的回调方法。
在这个回调函数里你可以做任何你想干的事。当fadeIn()方法执行完后,回调函数会被执行。你可以通过传入
第一个参数的值来延迟回调函数的执行。

如何写回调函数?
  如果自己在写一个方法或函数,你有可能会遇到需要一个回调函数。下面就是一个简单的常见回调函数例子:
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    callback();  
}  
  
mySandwich('ham', 'cheese', function() {  
    alert('Finished eating my sandwich.');  
});

我们有一个叫mySandwich的函数,它接受三个参数。第三个参数就是回调函数。当执行这个方法的时候,它会弹出
一个对话框,然后才执行回调函数。注意这里第三个参数是一段函数声明,这段声明在mySandwich里面被执行。
这个参数就是回调函数。
这个回调函数是定义在第三个参数被传入的,而且里面有一个alert来告诉这个函数被执行了。你可以看到下面这个例子,让一个函数作为传入,这使回调成为可能。例子a JSBin

让回调函数成为可选?
  有一件事也许大家都知道,就是JQuery中的回调函数都是可选的,这就意味着如果一个方法接受回调函数,
当我们不传值给这个回调函数,它应该不会报错。但是在我们的下面例子里,如果没有传参:
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    callback();  
}  
  
mySandwich('ham', 'cheese');

控制台会报错:“undefined is not a function” 。为了让它不报错就有如下代码:
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    if (callback) {  
        callback();  
    }  
}  
  
mySandwich('ham', 'cheese');

现在我们检测了回调函数是否传入了,就不会报错了

让回调函数必须是一个Function?
如果你想让第三个参数无论如何都要传一个Functon,可以按下方法实现:

function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    if (callback && typeof(callback) === "function") {  
        callback();  
    }  
}  
  
mySandwich('ham', 'cheese', 'vegetables');

注意这里用到typeof运算符,来确保传入值是一个方法,如果不是就会抛异常,这里有一个例子Here’s a JSBin

对于延时的注意
尽管回调函数总是最后被执行,但这不总是这样的。举个例子,如果含有回调函数里有一个异步的方法调用(AJAX or an animation),这时候回调会在异步方法调用后执行,但也可能在异步方法返回之前返回。下面就是一个JQuery animate例子:
function mySandwich(param1, param2, callback) {  
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);  
    
    $('#sandwich').animate({  
        opacity: 0  
    }, 5000, function() {  
        // Animation complete.  
    });  
    
    if (callback && typeof(callback) === "function") {  
        callback();  
    }  
}  
  
mySandwich('ham', 'cheese', function() {   
    alert('Finished eating my sandwich.');  
});  
尽管回调在异步函数调用之后执行,但是在异步函数返回之前,回调函数就已经结束了。为了解决这种问题,我建议把回调
函数放入animate的回调函数里面。虽然这不能覆盖所有的方法,但是回调函数最基本的意义就在于最后执行。

玩转JavaScript Callback函数的更多相关文章

  1. javascript callback函数的理解与使用

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

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

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

  3. JavaScript Callback 回调函数

    JavaScript callback回调函数 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这 ...

  4. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 【JavaScript】JavaScript回调函数

    什么是Javascript 回调函数? 函数和其他数据一样可以被赋值,删除,拷贝等,所以也可以把函数作为参数传入到另一个函数中. 这个函数就是所谓的回调函数   举例: //不带参数的case fun ...

  7. 关于Ajax使用 Callback 函数

    1.onreadystatechange 事件 当请求被发送到服务器时,我们需要执行一些基于响应的任务. 每当 readyState 改变时,就会触发 onreadystatechange 事件. r ...

  8. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  9. 理解javascript 回调函数

    ##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不 ...

随机推荐

  1. e683. 设置打印的方向

    PrinterJob pjob = PrinterJob.getPrinterJob(); PageFormat pf = pjob.defaultPage(); if (portrait) { pf ...

  2. 如果分配给命令的连接位于本地挂起事务中,ExecuteNonQuery 要求命令拥有事务。命令的 Transaction 属性尚未初始化

    DbConnection dbc = database.CreateConnection(); DbTransaction dbtt = null; try { dbc.Open(); dbtt = ...

  3. ceRNA 调控机制

    ceRNA 不同于mRNA, lncRNA, ncRNA 等概念,其指的既不是某一种类型的RNA(比如mRNA, lncRNA), 也不是某一类的RNA(如ncRNA); ceRNA 其实指的是不同种 ...

  4. SharePoint 2013 设置customErrors显示实际的错误信息

    一.首先设置IIS中的Web.config文件 找到对应的IIS应用程序目录,如:C:\inetpub\wwwroot\wss\VirtualDirectories\3000 在此文件夹下包含一个we ...

  5. storm深入研究

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:He Ransom链接:http://www.zhihu.com/question/23441639/answer/28075 ...

  6. iftop、ifstat详解

    ifstat 介绍 ifstat工具是个网络接口监测工具,比较简单看网络流量 实例 默认使用 #ifstat eth0 eth1 KB/s in KB/s out KB/s in KB/s out 0 ...

  7. Asp.net 程序优化js,css合并与压缩

    访问时将js和css压缩并且缓存在客户端,采用的是Yahoo.Yui.Compressor组件还完成的,从这里可下载 创建一个IHttpHandler来处理文件 ) }; )              ...

  8. import 和 import {} 的区别

    http://es6.ruanyifeng.com/#docs/module#export

  9. ubuntu zip解压

    您好,zip xx.zip压缩,unzip xx.zip 解压,tar zcvf xx.tar.gz压缩tar zxvf xx.tar.gz解压

  10. Java精选笔记_EL表达式

    EL表达式 初始EL EL是一种可以简化JSP页面的表达式,EL表达式的语法非常简单都是以"${"符号开始,以"}"符号结束的 EL表达式是一种简单的数据&qu ...