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 XMLHttpRequest对象全面剖析
Apr 24 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
JS使用for in有序获取对象数据
May 19 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
自动更新作用
2006/10/08 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jquery中this的使用说明
2010/09/06 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
利用JQuery阻止事件冒泡
2016/12/01 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python查询sqlite数据表的方法
2015/05/08 Python
python爬虫的工作原理
2017/03/05 Python
用python处理MS Word的实例讲解
2018/05/08 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python opencv实现证件照换底功能
2019/08/19 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
初一英语教学反思
2014/01/11 职场文书
求职毕业生自荐书
2014/02/08 职场文书
2014全国两会心得体会
2014/03/17 职场文书
体育运动口号
2014/06/09 职场文书
食堂标语大全
2014/06/11 职场文书
学校节能减排方案
2014/06/13 职场文书
文秘应届生求职信
2014/07/05 职场文书
员工手册编写范本
2015/05/14 职场文书
学历证明范文
2015/06/16 职场文书
开票证明
2015/06/23 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL