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 Study Notes 学习笔记(一)
Aug 04 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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
php实现图片局部打马赛克的方法
2015/02/11 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
Prototype Array对象 学习
2009/07/19 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解react-redux插件入门
2018/04/19 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Python读写Excel表格的方法
2021/03/02 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
公司委托书范本
2014/04/04 职场文书
施工单位安全责任书
2014/07/24 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
委托公证书格式
2015/01/26 职场文书
品德与社会教学反思
2016/02/24 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript