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

回调函数原理：

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

例子

1.基本方法

1
2
3
4
5
6
7
8
9
10
11
12
<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>

或者用匿名函数的形式

1
2
3
4
5
6
7
8
9
10
<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方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

传参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 传参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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

1
2
3
4
5
6
7
8
9
10
11
12
function f(num,callback){
 if(num<0) {
 alert("调用低层函数处理!");
 alert("分数不能为负,输入错误!");
 }else if(num==0){
  alert("调用低层函数处理!");
 alert("该学生可能未参加考试！");
 }else{
 alert("调用高层函数处理!");
 callback();
 }
}

//将下面这个test.html文件存盘与1.js在一个目录下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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中的回调模式：

形如：

1
2
3
4
5
6
7
8
9
10
11
function writeCode(callback){
   //执行一些事物，
   callback();
   //...
  }
  
  function intrduceBugs(){
   //....引入漏洞
  }
  
writeCode(intrduceBugs);

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

先看一个不怎么好的例子（后续要对其重构）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//模拟查找页面中的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';});
 
转载地址：http://www.jb51.net/article/53027.htm

javascript 回调函数应用的更多相关文章

  1. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  2. 【JavaScript】JavaScript回调函数

    什么是Javascript 回调函数? 函数和其他数据一样可以被赋值,删除,拷贝等,所以也可以把函数作为参数传入到另一个函数中. 这个函数就是所谓的回调函数   举例: //不带参数的case fun ...

  3. 理解javascript 回调函数

    ##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不 ...

  4. JavaScript回调函数的实现

    https://github.com/forsigner/blog/blob/master/source/_posts/javascript-callback.md 在JavaScript中,回调函数 ...

  5. JavaScript回调函数及数组方法测试

    JavaScript回调函数及数组方法测试 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. 如何定义 Java 的回调函数，与 JavaScript 回调函数的区别

    JavaScript 中的回调函数 在 JavaScript 中经常使用回调函数,比如:get 请求.post 请求等异步任务.在我们请求之前以及请求之后,都需要完成一些固定的操作,比如:请求之前先从 ...

  7. JavaScript回调函数的理解

    这里是个人对回调函数的一段理解 <!DOCTYPE html> <html> <head> <title>回调函数</title> < ...

  8. 关于javascript 回调函数

    http://segmentfault.com/q/1010000000212522 如何避免Javascript中回调函数的嵌套? http://javascript.ruanyifeng.com/ ...

  9. javascript回调函数笔记

    来源于:https://github.com/useaname/blog-study 在Javascript中,函数是第一类对象.意味函数可以像对象一样按照第一类被管理使用.回调函数是从一个叫函数式编 ...

随机推荐

  1. 【数据库摘要】5_Sql_IN

    IN 操作符 IN 操作符同意您在 WHERE 子句中查找多个值. SQL IN 语法 SELECT column_name(s) FROM table_name WHERE column_name ...

  2. CSS3中的border-radius

    以前在CSS2的基础上做圆角还能算得上是门学问!!各种图片.各种嵌套(<精通CSS——高级web标准解决方案>中有介绍,过程在这就不说了,网上一查就查得到,总之就是:没用CSS3之前觉得很 ...

  3. hdu 4784 Dinner Coming Soon

    spfa+优先队列.刚开始只用的spfa,结果tle到死.然后听队友说要用到优先队列,想了想,对时间分层的话的确每一个结点都只进队列一次即可,因为只有大时间才能更新出小时间,然后就wa成shi了.按队 ...

  4. Python 模块续和面向对象的介绍(六)

    一.基本模块 shutil 文件.目录.压缩包的处理模块 shutil.copyfile(src, dst) 拷贝文件 >>> shutil.copyfile('a.log','b. ...

  5. ZOJ 2972 Hurdles of 110m 【DP 背包】

    一共有N段过程,每段过程里可以选择 快速跑. 匀速跑 和 慢速跑 对于快速跑会消耗F1 的能量, 慢速跑会集聚F2的能量 选手一开始有M的能量,即能量上限 求通过全程的最短时间 定义DP[i][j] ...

  6. 作为Qt 合作伙伴的V-Play，比大家都领先了一步 planet.qt.io

    今天发布博客,将Flappy Bird和其它的小游戏移植到Respberry PI了 http://planet.qt.io/ planet.qt.io 的repo: https://coderevi ...

  7. springmvc-3.2-jsr303解决服务端验证问题

    从以前的验证:Stringutils.isEmpty....到struts的验证:xxxvalidate 现在使用jsr303使之更加简单  依赖hibernate-validator-4.xx.ja ...

  8. WEB开发：如何用js来模拟服务器的ajax响应，不依赖服务器来编写前端代码

    一.问题的提出 目前web前端开发,主流的思路是: 1)编写静态的html文件(不使用模板技术,与服务器无关) 2)页面通过ajax与服务器交互,进行数据的传输,数据格式为json格式 这里存在一个问 ...

  9. 临时节点不能有child 子节点

    [zk: 127.0.0.1:2181(CONNECTED) 67] create '/zk01/0001/aaaa' dada Ephemerals cannot have children: /z ...

  10. Nutch 是一个开源Java 实现的搜索引擎

    Nutch 是一个开源Java 实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫. Nutch的创始人是Doug Cutting,他同时也是Lucene.Hado ...