回调函数原理：

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

例子

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';});

浅谈js回调函数的更多相关文章

  1. 妙谈js回调函数的理解！

    很有共鸣,之前也是一直对回调函数感觉不明不白的,自己也看了不少解释说明.后来我觉得造成很多人对回调理解困难的一个原因就是,我在开发中见到的大多数使用了回调函数的情况都是直接上来就 传一个回调函数进去 ...

  2. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  3. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  4. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  5. 浅谈 js 语句块与标签

    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...

  6. 浅谈JS面向对象

    浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...

  7. 浅谈JS严格模式

    浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...

  8. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  9. 浅谈JS中 var let const 变量声明

    浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...

随机推荐

  1. python操作mongodb数据库

    一.MongoDB 数据库操作 连接数据库 import pymongo conn = pymongo.Connection() # 连接本机数据库 conn = pymongo.Connection ...

  2. Fouandation（NSString ,NSArray,NSDictionary,NSSet） 中常见的理解错误区

    Fouandation 中常见的理解错误区 1.NSString //快速创建(实例和类方法) 存放的地址是 常量区 NSString * string1 = [NSString alloc]init ...

  3. log4j mongoDB配置

    log4j.rootCategory=INFO, stdout log4j.appender.stdout=org.springframework.data.document.mongodb.log4 ...

  4. Ubuntu播放yuv文件

    mplayer -demuxer rawvideo -rawvideo w=176:h=144 test.yuv mplayer -fps 30 test.264 ffmpeg采集摄像头视频数据 ff ...

  5. CentOS下通过yum安装svn及配置

    CentOS下通过yum安装svn及配置 1.环境centos5.5 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata s ...

  6. java容器collection的一些简单特点

    1.List ArrayList 可随机访问元素,但中间插入和一处元素较慢 LinkedList 在中间进行的插入和删除操作代价较小,随机访问比ArrayList较慢 特性集比ArrayList大 2 ...

  7. iOS webView与H5的交互(返回页面的处理)

    摘自:http://blog.csdn.net/qq_29284809/article/details/50548413 调用 H5页面的同名返回方法(必须保证名字一致)!!!

  8. An error occurred while processing an SVN command

    今天在使用SmartSVN的时候,遇到这个问题,反复几次,也没有得到解决,而且进入了死循环,一直在提示这个消息,即使在cleanup之后. 百度了一番之后,找到了解决办法: 把出错的文件在本地删除掉, ...

  9. Mac使用最多的软件，整理集合

    软件资源 #[PDF移除密码]Cisdem PDFPasswordRemover 3.0.0 [TNT] #Alfred_3.1.1_737 #fwmso2016vlu2.0 #iHosts #Omn ...

  10. python 数据分析--词云图，图形可视化美国竞选辩论

    这篇博客从用python实现分析数据的一个完整过程.以下着重几个python的moudle的运用"pandas",""wordcloud"," ...