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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
KnockoutJs快速入门教程
May 16 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
个人小程序接入支付解决方案
May 23 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
JS二分查找算法详解
2017/11/01 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
python 运算符 供重载参考
2009/06/11 Python
python中dir函数用法分析
2015/04/17 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python Selenium参数配置方法解析
2020/01/19 Python
简单的Python人脸识别系统
2020/07/14 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
公安机关起诉意见书
2015/05/20 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL