回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考。
回调函数原理:
我现在出发,到了通知你”
这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程
例子
1.基本方法
01 | <script language= "javascript" type= "text/javascript" > |
02 | function doSomething(callback) { |
03 | // … |
04 | // Call the callback |
05 | callback( 'stuff' , 'goes' , 'here' ); |
06 | } |
07 | function foo(a, b, c) { |
08 | // I'm the callback |
09 | alert(a + " " + b + " " + c); |
10 | } |
11 | doSomething(foo); |
12 | </script> |
或者用匿名函数的形式
01 | <script language= "javascript" type= "text/javascript" > |
02 | function dosomething(damsg, callback){ |
03 | alert(damsg); |
04 | if ( typeof callback == "function" ) |
05 | callback(); |
06 | } |
07 | dosomething( "回调函数" , function (){ |
08 | alert( "和 jQuery 的 callbacks 形式一样!" ); |
09 | }); |
10 | </script> |
2.高级方法
使用javascript的call方法
01 | <script language= "javascript" type= "text/javascript" > |
02 | function Thing(name) { |
03 | this .name = name; |
04 | } |
05 | Thing.prototype.doSomething = function (callback) { |
06 | // Call our callback, but using our own instance as the context |
07 | callback.call( this ); |
08 | } |
09 | |
10 | function foo() { |
11 | alert( this .name); |
12 | } |
13 | |
14 | var t = new Thing( 'Joe' ); |
15 | t.doSomething(foo); // Alerts "Joe" via `foo` |
16 | </script> |
传参数
01 | <script language= "javascript" type= "text/javascript" > |
02 | function Thing(name) { |
03 | this .name = name; |
04 | } |
05 | Thing.prototype.doSomething = function (callback, salutation) { |
06 | // Call our callback, but using our own instance as the context |
07 | callback.call( this , salutation); |
08 | } |
09 | function foo(salutation) { |
10 | alert(salutation + " " + this .name); |
11 | } |
12 | var t = new Thing( 'Joe' ); |
13 | t.doSomething(foo, 'Hi' ); // Alerts "Hi Joe" via `foo` |
14 | </script> |
使用 javascript 的 apply 传参数
01 | <script language= "javascript" type= "text/javascript" > |
02 | function Thing(name) { |
03 | this .name = name; |
04 | } |
05 | Thing.prototype.doSomething = function (callback) { |
06 | // Call our callback, but using our own instance as the context |
07 | callback.apply( this , [ 'Hi' , 3, 2, 1]); |
08 | } |
09 | function foo(salutation, three, two, one) { |
10 | alert(salutation + " " + this .name + " – " + three + " " + two + " " + one); |
11 | } |
12 | var t = new Thing( 'Joe' ); |
13 | t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo` |
14 | </script> |
例子
//假如提供的数据源是一整数,为某学生的分数,当num<=0,由底层处理,当n>0时由高层处理.
//将下面这个函数拷贝下来存盘为1.js
01 | function f(num,callback){ |
02 | if (num<0) { |
03 | alert( "调用低层函数处理!" ); |
04 | alert( "分数不能为负,输入错误!" ); |
05 | } else if (num==0){ |
06 | alert( "调用低层函数处理!" ); |
07 | alert( "该学生可能未参加考试!" ); |
08 | } else { |
09 | alert( "调用高层函数处理!" ); |
10 | callback(); |
11 | } |
12 | } |
//将下面这个test.html文件存盘与1.js在一个目录下:
01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
03 | < html > |
04 | < head > |
05 | < meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" > |
06 | < script src = "1.js" type = "text/javascript" ></ script > |
07 | < title >无标题文档</ title > |
08 | < script type = "text/javascript" > |
09 | function test(){ |
10 | var p=document.getElementById("pp"); |
11 | pp.innerText=""; |
12 | var num=document.getElementById("score").value; |
13 | f(num,function(){ //匿名高层处理函数 |
14 | if(num< 60 ) alert("未及格!"); |
15 | else if(num<=90) alert("该生成绩优良!"); |
16 | else alert("该生成绩优秀!"); }) |
17 | pp.innerText = "by since1978 qq558064!" |
18 | } |
19 | </script> |
20 | </ head > |
21 | |
22 | < body > |
23 | < p > |
24 | 回调函数示例:当学生成绩score<=0分时候,由底层处理;当score>0时,由高层处理。 |
25 | </ p > |
26 | 请输入学生成绩< input type = "text" id = "score" > |
27 | < input type = "button" onClick = "test()" value = " 看看结果" > |
28 | < p id = "pp" ></ p > |
29 | </ body > |
30 | </ html > |
下面是其它网友的补充:
javascript中的回调模式:
形如:
01 | function writeCode(callback){ |
02 | //执行一些事物, |
03 | callback(); |
04 | //... |
05 | } |
06 | |
07 | function intrduceBugs(){ |
08 | //....引入漏洞 |
09 | } |
10 | |
11 | writeCode(intrduceBugs); |
我们传递函数的应用给writeCode(),让writeCode在适当的时候来执行它(返回以后调用)
先看一个不怎么好的例子(后续要对其重构):
01 | //模拟查找页面中的dom节点,将查找到的节点存在数组里面统一返回 |
02 | //此函数只用于查找不对dom节点做任何的逻辑处理 |
03 | var findNodes = function (){ |
04 | var i = 100000; //大量的循环, |
05 | var nodes = []; //用于存储找到的dom节点 |
06 | var found; |
07 | while (i){ |
08 | i -=1; |
09 | nodes.push(found); |
10 | } |
11 | return nodes; |
12 | } |
13 | |
14 | //将查找找到的dom节点全部隐藏 |
15 | var hide = function (nodes){ |
16 | var i = 0, |
17 | max = nodes.length; |
18 | for (;i<max;i++){ |
19 | //findNodes后面有括号代表立即执行,先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ; |
20 | nodes[i].style.display= "none" |
21 | } |
22 | |
23 | 上面的方法是低效的,以为hide()必须再次遍历有findNodes()返回的数组节点,如何避免这种多余的循环呢。 |
24 | 我们不能直接在findNodes中对查询到的节点进行隐藏(这样检索就可修改逻辑耦合了),那么他就不再是一个通用函数了。 |
25 | 解决方法是用回调模式,可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行 |
26 | |
27 | //重构findNodes以接受一个回调函数 |
28 | var findNodes = fucntion(callback){ |
29 | var i = 100000, |
30 | nodes = [], |
31 | found; |
32 | //检查回调函数是否可用调用的 |
33 | if ( typeof callback !== 'function' ){ |
34 | callback = false ; |
35 | } |
36 | while (i){ |
37 | i -= 1; |
38 | if (callback){ |
39 | callback(found); |
40 | } |
41 | nodes.push(found); |
42 | } |
43 | return nodes; |
44 | } |
45 | |
46 | //回调函数 |
47 | var hide = function (node){ |
48 | node.style.display = 'none ' ; |
49 | } |
50 | //找到后续节点并在后续执行中对其进行隐藏 |
51 | findNodes(hide); //先执行findNodes然后执行hide,当然回调函数也可以在调用主函数时创建:findNodes(function(node){node.style.display = 'none';}); |