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 相关文章推荐
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
vue请求数据的三种方式
Mar 04 Javascript
微信小程序地图实现展示线路
Jul 29 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php中用数组的方法设置cookies
2011/04/21 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
javascript模块化简单解析
2016/04/07 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
浅析Python中的多条件排序实现
2016/06/07 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Django rest framework实现分页的示例
2018/05/24 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python实现图片九宫格分割
2021/03/07 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
python2和python3哪个使用率高
2020/06/23 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
大学毕业感言
2014/01/10 职场文书
活动总结怎么写啊
2014/05/07 职场文书
学校远程教育工作总结
2015/08/11 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python