js中回调函数的学习笔记


Posted in Javascript onJuly 31, 2014

回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考。

回调函数原理:

我现在出发,到了通知你”
这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程

例子

1.基本方法

<script language="javascript" type="text/javascript">
function doSomething(callback) {
// … 
// Call the callback
callback('stuff', 'goes', 'here');
} 
function foo(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
} 
doSomething(foo); 
</script>

或者用匿名函数的形式

<script language="javascript" type="text/javascript">
 function dosomething(damsg, callback){
  alert(damsg);
  if(typeof callback == "function") 
  callback();
 } 
dosomething("回调函数", function(){
  alert("和 jQuery 的 callbacks 形式一样!");
 }); 
</script>

 
2.高级方法
 
使用javascript的call方法

<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.call(this);
}
 
function foo() {
alert(this.name);
}
 
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Joe" via `foo`
</script>

 
传参数

<script language="javascript" type="text/javascript"> 
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
// Call our callback, but using our own instance as the context
callback.call(this, salutation);
} 
function foo(salutation) {
alert(salutation + " " + this.name);
} 
var t = new Thing('Joe');
t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`
</script>

使用 javascript 的 apply 传参数

<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.apply(this, ['Hi', 3, 2, 1]);
} 
function foo(salutation, three, two, one) {
alert(salutation + " " + this.name + " ? " + three + " " + two + " " + one);
} 
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Hi Joe ? 3 2 1" via `foo`
</script>

例子
//假如提供的数据源是一整数,为某学生的分数,当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中的回调模式:

形如:

function writeCode(callback){ 
   //执行一些事物, 
   callback(); 
   //... 
  } 
 
  function intrduceBugs(){ 
   //....引入漏洞 
  } 
 
writeCode(intrduceBugs);

        我们传递函数的应用给writeCode(),让writeCode在适当的时候来执行它(返回以后调用)

先看一个不怎么好的例子(后续要对其重构):

//模拟查找页面中的dom节点,将查找到的节点存在数组里面统一返回 
  //此函数只用于查找不对dom节点做任何的逻辑处理 
  var findNodes = function(){ 
   var i = 100000;//大量的循环, 
   var nodes = [];//用于存储找到的dom节点 
   var found; 
   while(i){ 
    i -=1; 
    nodes.push(found); 
   } 
   return nodes; 
  } 
 
  //将查找找到的dom节点全部隐藏 
  var hide = function(nodes){ 
   var i = 0, 
    max = nodes.length; 
   for(;i<max;i++){ 
//findNodes后面有括号代表立即执行,先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ; 
nodes[i].style.display="none"
}

上面的方法是低效的,以为hide()必须再次遍历有findNodes()返回的数组节点,如何避免这种多余的循环呢。 
  我们不能直接在findNodes中对查询到的节点进行隐藏(这样检索就可修改逻辑耦合了),那么他就不再是一个通用函数了。 
  解决方法是用回调模式,可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行

//重构findNodes以接受一个回调函数 
   var findNodes = fucntion(callback){ 
    var i = 100000, 
     nodes = [], 
     found; 
    //检查回调函数是否可用调用的 
    if(typeof callback !== 'function'){ 
     callback = false; 
    } 
    while(i){ 
     i -= 1; 
     if(callback){ 
      callback(found); 
     } 
     nodes.push(found); 
    } 
    return nodes; 
   } 
 
   //回调函数 
   var hide = function(node){ 
    node.style.display = 'none '; 
   } 
   //找到后续节点并在后续执行中对其进行隐藏 
 findNodes(hide);//先执行findNodes然后执行hide,当然回调函数也可以在调用主函数时创建:findNodes(function(node){node.style.display = 'none';});
Javascript 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
angular directive的简单使用总结
May 24 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 #Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 #Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 #Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 #Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 #Javascript
浅析Node在构建超媒体API中的作用
Jul 30 #Javascript
JS实现图片无间断滚动代码汇总
Jul 30 #Javascript
You might like
PHP中读写文件实现代码
2011/10/20 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
python字符串连接方式汇总
2014/08/21 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
C语言面试题
2015/10/30 面试题
单位办理社保介绍信
2014/01/10 职场文书
党校学习自我鉴定
2014/02/24 职场文书
司机职责范本
2014/03/08 职场文书
计算机系本科生求职信
2014/05/31 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
安全责任书模板
2014/07/22 职场文书
立志成才演讲稿
2014/09/04 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript