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 相关文章推荐
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
Javascript实现计算个人所得税
May 10 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
微信小程序用户授权最佳实践指南
May 08 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
php生成zip文件类实例
2015/04/07 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python抓取框架 Scrapy的架构
2016/08/12 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python3 线性回归验证方法
2019/07/09 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
基于pandas中expand的作用详解
2019/12/17 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
教师找工作推荐信
2013/11/23 职场文书
长城的导游词
2015/01/30 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
春季运动会加油词
2015/07/18 职场文书
《三国志》赏析
2019/08/27 职场文书
详解Django的MVT设计模式
2021/04/29 Python
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸