浅谈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"

"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中的回调模式：

形如：

?


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

您可能感兴趣的文章:

时间： 2024-10-10 22:05:34

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

浅谈js中函数作用域和声明提前

JavaScript的函数具有两个主要特性,一是函数是一个对象,二是函数提供作用域支持,今天主要聊聊函数的作用域支持. 简单看两个概念: 具名函数表达式 var add = function add (a) { return a } 这段代码描述了一个函数,称为‘具名函数表达式’. 如果省略函数表达式中的名字,它就是‘匿名函数表达式’,即匿名函数,例如 var add = function (a, b) { return a + b; }; 最后看下‘函数声明’ function foo() {

浅谈js中函数作用域问题（一）

本人学习js时间并不长,前几天,写一段js代码时,在js指定一个按钮事件的匿名函数中加入一个同级函数,具体代码可见如下: var mainOb=document.getElementById("divObject");                                        var start=document.getElementById("start"); var a=10; start.onclick=funcrion(){ functi

浅谈 js 对象 toJSON 方法

前些天在<浅谈 JSON.stringify 方法>说了他的正确使用姿势,今天来说下 toJSON 方法吧.其实我觉得这货跟 toString 一个道理,他是给 stringify 方法字符串化的时候调用的.看下 MDN 官方文档吧<toJSON behavior>.非常简单,但是要注意的是他和 stringify 方法第二个参数稍微有点不同.因为 stringify 第二个参数是回调函数时,只是对当前 key 对应的值进行修改.而 toJSON 则是对当前对象进行修改.例如: v

浅谈 js 语句块与标签

原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象字面量么?怎么成了语句块了?如果在赋值语句或者表达式里用的时候,确实是对象字面量,如: var a = {}; ({toString:function(){return "hehe"}}) + "..."; 是不是很有意思..但是直接使用如: {toString: fu

浅谈JS之AJAX

0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导致页面重新加载,这样才有更好的用户体验. Ajax是基于以下开放标准: javascript(DOM) css html xml(json) 通俗的说就是使用了javascript(DOM)的XMLH

从window.console&amp;&amp;console.log(123)浅谈JS的且运算逻辑(&amp;&amp;)

从window.console&&console.log(123)浅谈JS的且运算逻辑(&&) 作者:www.cnblogs.com  来源:www.cnblogs.com  发布日期:2015-03-01 一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三个知识点第一:短路原则这个大家都非常清楚的了,在做且运算的时候,“同真

浅谈js中的this关键字

浅谈js中的this关键字 全局作用域中的this 函数作用域中的this 不同函数调用方法下的this 直接调用 作为对象的方法调用 作为构造函数调用 通过call或apply方法调用 嵌套函数作用域中的this 浅谈js中的this关键字 this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示,权当交流之用. 全局作用域中的this 本文将以作用域由

37.浅谈js原型的理解

浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面的专有名词!如果你没学过c++或者Java之类的更接触底层的语言,那就不要太深究,理解会用自然可以了,当接触到更多语言时慢慢的会理解越来越深刻! 下面我就举例分享一下prototype的概念!知道对于初学者知道这些就足够了! 分析一下,上面这个例子!我们可以知道 People的类型是一个对象!按照j

浅谈 js eval作用域

就简单聊下如何全局 eval 一个代码. var x = 1; (function () { eval('var x = 123;'); })(); console.log(x); 这个代码得到的是 1 而不是 123如果想让 eval 执行的代码是全局的,那么有几种方法. var x = 1; (function () { window.eval('var x = 123;'); })(); console.log(x); 这个方法标准浏览器都可以得到 123 而IE6-8则依然是 1 相同的