javascript的回调函数应用示例


Posted in Javascript onFebruary 20, 2014

回调函数概念:回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数。

JS Api 里这样解释:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

使用回调函数的原因:可以把调用者与被调用者分开。调用者不关心谁是被调用者,所有它需知道的,只是存在一个具有某种特定原型、某些限制条件(如返回值为int)的被调用函数。

考虑一个这样的例子:

假如某个项目的底层和高层是由不同的人员协同完成.底层负责数据的存取,高层负责数据的表示.当高层要用到某个模块的数据,于是他对底层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口.

底层的人员说:我给你提供数据,怎么展示和处理则是你的事情.我不可能为你每个需求都提供一个数据接口,我给你提供一个通过的接口.你得到数据,然后自己写函数去展示.由是经过协商,双方提供了一个这样的接口:

//data表示底层提供的数据源,funcName表示高层的调用函数 function(data,funcName){ 
1.data属于情形1,由底层处理; 
2.data属于情形2,由高层处理,怎么处理呢?利用高层提供的函数funcName处理 
..... 
}

我可能还没说清楚,我们看个例子一下子就明白了
//假如提供的数据源是一整数,为某学生的分数,当num<=0,由底层处理,当n>0时由高层处理. //将下面这个函数拷贝下来存盘为1.js 
function f(num,callback){ 
if(num<0) { 
alert("调用低层函数处理!"); 
alert("分数不能为负,输入错误!"); 
}else if(num==0){ 
alert("调用低层函数处理!"); 
alert("该学生可能未参加考试!"); 
}else{ 
alert("调用高层函数处理!"); 
callback(); 
} 
}

//将下面这个test.html文件存盘与1.js在一个目录下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<script src="1.js" type="text/javascript"></script> 
<title>无标题文档</title> 
<script type="text/javascript"> 
function test(){ 
var p=document.getElementById("pp"); 
pp.innerText=""; 
var num=document.getElementById("score").value; 
f(num,function(){ //匿名高层处理函数 
if(num<60) alert("未及格!"); 
else if(num<=90) alert("该生成绩优良!"); 
else alert("该生成绩优秀!"); }) 
pp.innerText="by since1978 qq558064!" 
} 
</script> 
</head> 
<body> 
<p> 
回调函数示例:当学生成绩score<=0分时候,由底层处理;当score>0时,由高层处理。 
</p> 
请输入学生成绩<input type="text" id="score"> 
<input type="button" onClick="test()" value=" 看看结果"> 
<p id="pp"></p> 
</body> 
</html>

运行此文件,可以看到效果
Javascript 相关文章推荐
Jquery 获取checkbox的checked问题
Nov 16 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
canvas 实现中国象棋
Feb 17 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
JS的get和set使用示例
Feb 20 #Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 #Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 #Javascript
js确认删除对话框效果的示例代码
Feb 20 #Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 #Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 #Javascript
js左右弹性滚动对联广告代码分享
Feb 19 #Javascript
You might like
如何开始收听短波广播
2021/03/01 无线电
基于文本的留言簿
2006/10/09 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
splice slice区别
2006/10/09 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
大学生学业生涯规划
2014/01/05 职场文书
高中美术教学反思
2014/01/19 职场文书
银行贷款承诺书
2014/03/29 职场文书
市场部经理岗位职责
2014/04/10 职场文书
护理目标管理责任书
2014/07/25 职场文书
德劲DE1108畅想
2021/04/22 无线电