富贵资源网 Design By www.hznty.com
回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了，下面本文章把我在学习回调函数例子给各位同学介绍一下吧，有需了解的同学不防进入参考。
回调函数原理：
我现在出发，到了通知你”
这是一个异步的流程，“我出发”这个过程中（函数执行），“你”可以去做任何事，“到了”（函数执行完毕）“通知你”（回调）进行之后的流程
例子
1.基本方法
<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>
或者用匿名函数的形式
<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方法
<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>
传参数
<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 传参数
<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
function f(num,callback){
if(num<0) {
alert("调用低层函数处理!");
alert("分数不能为负,输入错误!");
}else if(num==0){
alert("调用低层函数处理!");
alert("该学生可能未参加考试！");
}else{
alert("调用高层函数处理!");
callback();
}
}
//将下面这个test.html文件存盘与1.js在一个目录下：
<!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="/UploadFiles/2021-04-02/1.js">下面是其它网友的补充：
javascript中的回调模式：
形如：
function writeCode(callback){ //执行一些事物， callback(); //... } function intrduceBugs(){ //....引入漏洞 } writeCode(intrduceBugs);我们传递函数的应用给writeCode()，让writeCode在适当的时候来执行它（返回以后调用）
先看一个不怎么好的例子（后续要对其重构）：
//模拟查找页面中的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';});
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...