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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
微信小程序自定义弹出层效果
May 26 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检测网页是否被百度收录的函数代码
2013/10/09 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
Prototype Function对象 学习
2009/07/12 Javascript
javascript 闭包
2011/09/15 Javascript
js中有关IE版本检测
2012/01/04 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
超市5.1促销活动
2014/01/15 职场文书
中学教师自我鉴定
2014/02/07 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
中考学习决心书
2015/02/04 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
毕业实习证明范本
2015/06/16 职场文书
2016年教师新年寄语
2015/08/18 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL