提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js中回调函数的学习笔记

JS笔记学习 函数 回调
2023-06-13 09:15:40 时间

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

回调函数原理：

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

例子

1.基本方法

<scriptlanguage="javascript"type="text/javascript">
functiondoSomething(callback){
//…
//Callthecallback
callback("stuff","goes","here");
}
functionfoo(a,b,c){
//I"mthecallback
alert(a+""+b+""+c);
}
doSomething(foo);
</script>

或者用匿名函数的形式

<scriptlanguage="javascript"type="text/javascript">
functiondosomething(damsg,callback){
alert(damsg);
if(typeofcallback=="function")
callback();
}
dosomething("回调函数",function(){
alert("和jQuery的callbacks形式一样!");
});
</script>

 
2.高级方法
 
使用javascript的call方法

<scriptlanguage="javascript"type="text/javascript">
functionThing(name){
this.name=name;
}
Thing.prototype.doSomething=function(callback){
//Callourcallback,butusingourowninstanceasthecontext
callback.call(this);
}

functionfoo(){
alert(this.name);
}

vart=newThing("Joe");
t.doSomething(foo);//Alerts"Joe"via`foo`
</script>

 
传参数

<scriptlanguage="javascript"type="text/javascript">
functionThing(name){
this.name=name;
}
Thing.prototype.doSomething=function(callback,salutation){
//Callourcallback,butusingourowninstanceasthecontext
callback.call(this,salutation);
}
functionfoo(salutation){
alert(salutation+""+this.name);
}
vart=newThing("Joe");
t.doSomething(foo,"Hi");//Alerts"HiJoe"via`foo`
</script>

使用javascript的apply传参数

<scriptlanguage="javascript"type="text/javascript">
functionThing(name){
this.name=name;
}
Thing.prototype.doSomething=function(callback){
//Callourcallback,butusingourowninstanceasthecontext
callback.apply(this,["Hi",3,2,1]);
}
functionfoo(salutation,three,two,one){
alert(salutation+""+this.name+"?"+three+""+two+""+one);
}
vart=newThing("Joe");
t.doSomething(foo);//Alerts"HiJoe?321"via`foo`
</script>

例子
//假如提供的数据源是一整数,为某学生的分数,当num<=0,由底层处理,当n>0时由高层处理.

//将下面这个函数拷贝下来存盘为1.js

functionf(num,callback){
if(num<0){
alert("调用低层函数处理!");
alert("分数不能为负,输入错误!");
}elseif(num==0){
alert("调用低层函数处理!");
alert("该学生可能未参加考试！");
}else{
alert("调用高层函数处理!");
callback();
}
}

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

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<scriptsrc="1.js"type="text/javascript"></script>
<title>无标题文档</title>
<scripttype="text/javascript">
functiontest(){
varp=document.getElementById("pp");
pp.innerText="";
varnum=document.getElementById("score").value;
f(num,function(){//匿名高层处理函数
if(num<60)alert("未及格！");
elseif(num<=90)alert("该生成绩优良！");
elsealert("该生成绩优秀!");})
pp.innerText="bysince1978qq558064!"
}
</script>
</head>

<body>
<p>
回调函数示例:当学生成绩score<=0分时候，由底层处理；当score>0时，由高层处理。
</p>
请输入学生成绩<inputtype="text"id="score">
<inputtype="button"onClick="test()"value="看看结果">
<pid="pp"></p>
</body>
</html>

下面是其它网友的补充：

javascript中的回调模式：

形如：

functionwriteCode(callback){
//执行一些事物，
callback();
//...
}

functionintrduceBugs(){
//....引入漏洞
}

writeCode(intrduceBugs);

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

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

//模拟查找页面中的dom节点，将查找到的节点存在数组里面统一返回
//此函数只用于查找不对dom节点做任何的逻辑处理
varfindNodes=function(){
vari=100000;//大量的循环，
varnodes=[];//用于存储找到的dom节点
varfound;
while(i){
i-=1;
nodes.push(found);
}
returnnodes;
}

//将查找找到的dom节点全部隐藏
varhide=function(nodes){
vari=0,
max=nodes.length;
for(;i<max;i++){
//findNodes后面有括号代表立即执行，先执行findNodes()然后执行hide()<hide(findNodes());执行函数};
nodes[i].style.display="none"
}

上面的方法是低效的，以为hide()必须再次遍历有findNodes()返回的数组节点，如何避免这种多余的循环呢。
我们不能直接在findNodes中对查询到的节点进行隐藏（这样检索就可修改逻辑耦合了），那么他就不再是一个通用函数了。
解决方法是用回调模式，可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行

//重构findNodes以接受一个回调函数
varfindNodes=fucntion(callback){
vari=100000,
nodes=[],
found;
//检查回调函数是否可用调用的
if(typeofcallback!=="function"){
callback=false;
}
while(i){
i-=1;
if(callback){
callback(found);
}
nodes.push(found);
}
returnnodes;
}

//回调函数
varhide=function(node){
node.style.display="none";
}
//找到后续节点并在后续执行中对其进行隐藏
findNodes(hide);//先执行findNodes然后执行hide，当然回调函数也可以在调用主函数时创建：findNodes(function(node){node.style.display="none";});

相关文章