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中清空数组的三种方法分享
Apr 07 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
微信小程序实现打卡签到页面
Sep 21 Javascript
JavaScript组合继承详解
Nov 07 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
ThinkPHP之N方法实例详解
2014/06/20 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
Bootstrap精简教程
2015/11/27 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Python 实现简单的客户端认证
2020/07/29 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
英语教师岗位职责
2014/03/16 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
学校就业保障协议书
2019/06/24 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
SQL SERVER触发器详解
2022/02/24 SQL Server
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js