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 相关文章推荐
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
Vue底层实现原理总结
Feb 17 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python 多线程实例详解
2017/03/25 Python
python中的随机函数小结
2018/01/27 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python中pow函数用法及功能说明
2020/12/04 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
25道Java面试题集合
2013/05/21 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
教师节演讲稿
2014/05/06 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
react合成事件与原生事件的相关理解
2021/05/13 Javascript
使用Redis实现实时排行榜功能
2021/07/02 Redis
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis