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 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
基于JS实现视频上传显示进度条
May 12 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript 乱码问题
2009/08/06 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python3对接mysql数据库实例详解
2019/04/30 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
结构和类有什么异同
2012/07/16 面试题
商场主管竞聘书
2014/03/31 职场文书
启动仪式策划方案
2014/06/14 职场文书
民政局个人整改措施
2014/09/24 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
办公室主任个人总结
2015/02/28 职场文书
活动总结书怎么写
2015/05/11 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA