js中回调函数的学习笔记
来源:互联网 发布:windows 7库 快捷方式 编辑:程序博客网 时间:2024/06/05 07:50
这篇文章主要介绍了js中回调函数的相关知识,需要的朋友可以参考下
回调函数是什么在学习之前还真不知道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) { callback.call(this, salutation); } function foo(salutation) { alert(salutation + " " + this.name); } var t = new Thing('Joe'); t.doSomething(foo, 'Hi');</script>
使用 javascript 的 apply 传参数
<script language="javascript" type="text/javascript"> function Thing(name) { this.name = name; } Thing.prototype.doSomething = function(callback) { 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);</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="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中的回调模式:
形如:
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';});
0 0
- js中回调函数的学习笔记
- js中回调函数的学习笔记
- js中回调函数的运用
- JS中回调函数的写法
- js中回调函数
- 回调函数学习笔记
- 回调函数学习笔记
- js中回调函数的理解 举例说明js回调函数
- js的回调函数
- js的回调函数
- JS笔记 —— 回调函数
- 回调函数的笔记
- js回调函数,匿名函数学习
- Node.js学习4- 回调函数
- 回调函数的学习
- js中自定义回调函数
- js 中递归 与 回调函数
- js 中递归 与 回调函数
- 高速外存体系下的高维索引标准.思路列表
- ipython 启动执行
- 引用计数和AddRef、Release
- Extjs动态显示列/隐藏列
- Java 线程面试问题
- js中回调函数的学习笔记
- Hibernate的加载抓取方式:Failed to lazily initialize a collection - no session
- magento 出生日期下拉框 customer dob
- AFN框架实现简单的网络状态监测以及支持https安全证书
- Genymotion升完win10后无法打开
- VMWare安装CentOS图文教程
- <STL系列> 配置器
- android模拟器,Genymotion问题:Unable to start the virtual device.
- HDU 4029 Distinct Sub-matrix(哈希+后缀数组)