本文深入讲解JavaScript中的回调函数，包括其工作原理、基本用法及高级应用，通过多个实例演示了如何利用回调函数处理异步操作，并展示了如何优化代码结构以提高效率。
回调函数是什么在学习之前还真不知道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
扫一扫
2162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
