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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
javascript实现 在光标处插入指定内容
May 25 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 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/01/08 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
Promise扫盲贴
2019/06/24 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
python中assert用法实例分析
2015/04/30 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
python学习 流程控制语句详解
2016/06/01 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Django中modelform组件实例用法总结
2020/02/10 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
2014年两会学习心得体会
2014/03/17 职场文书
个人作风建设总结
2014/10/23 职场文书
商场圣诞节活动总结
2015/05/06 职场文书