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 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
js快速排序的实现代码
Dec 08 Javascript
JavaScript中操作字符串小结
May 04 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
js获取ip和地区
Mar 10 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
浅谈js的异步执行
2016/10/18 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python获取糗百图片代码实例
2013/12/18 Python
如何利用python查找电脑文件
2018/04/27 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
社区安全检查制度
2014/02/03 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
安全员岗位职责
2015/02/10 职场文书
小学中队活动总结
2015/05/11 职场文书
同学联谊会邀请函
2019/06/24 职场文书