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一组验证函数
Dec 20 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP用mysql数据库存储session的代码
2010/03/05 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
Laravel find in set排序实例
2019/10/09 PHP
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python批量替换页眉页脚实例代码
2018/01/22 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
Yahoo-PHP面试题1
2016/07/20 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
关于分班的感言
2015/08/04 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python