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';}); |
javascript 回调函数应用的更多相关文章
- 理解 JavaScript 回调函数并使用
JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...
- 【JavaScript】JavaScript回调函数
什么是Javascript 回调函数? 函数和其他数据一样可以被赋值,删除,拷贝等,所以也可以把函数作为参数传入到另一个函数中. 这个函数就是所谓的回调函数 举例: //不带参数的case fun ...
- 理解javascript 回调函数
##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不 ...
- JavaScript回调函数的实现
https://github.com/forsigner/blog/blob/master/source/_posts/javascript-callback.md 在JavaScript中,回调函数 ...
- JavaScript回调函数及数组方法测试
JavaScript回调函数及数组方法测试 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> &l ...
- 如何定义 Java 的回调函数,与 JavaScript 回调函数的区别
JavaScript 中的回调函数 在 JavaScript 中经常使用回调函数,比如:get 请求.post 请求等异步任务.在我们请求之前以及请求之后,都需要完成一些固定的操作,比如:请求之前先从 ...
- JavaScript回调函数的理解
这里是个人对回调函数的一段理解 <!DOCTYPE html> <html> <head> <title>回调函数</title> < ...
- 关于javascript 回调函数
http://segmentfault.com/q/1010000000212522 如何避免Javascript中回调函数的嵌套? http://javascript.ruanyifeng.com/ ...
- javascript回调函数笔记
来源于:https://github.com/useaname/blog-study 在Javascript中,函数是第一类对象.意味函数可以像对象一样按照第一类被管理使用.回调函数是从一个叫函数式编 ...
随机推荐
- 聊聊高并发(二十五)解析java.util.concurrent各个组件(七) 理解Semaphore
前几篇分析了一下AQS的原理和实现.这篇拿Semaphore信号量做样例看看AQS实际是怎样使用的. Semaphore表示了一种能够同一时候有多个线程进入临界区的同步器,它维护了一个状态表示可用的票 ...
- 自定制emoji替换系统的emoji键盘
一.关于emoji表情 随着iOS系统版本的升级,对原生emoji表情的支持也越来越丰富.emoji表情是unicode码中为表情符号设计的一组编码,当然,还有独立于unicode的另一套编码SBUn ...
- [置顶] Linux下文件和目录权限说明
在Linux下使用ls -l或者ll命令可以查看文件和文件夹的权限.结果显示类似于: drwxrwxrwx,这里分为四组,分别为文件类型,文件所有者的权限(读写执行),文件所有者所在组用户的权限(读写 ...
- pycharm+QT4的helloworld
# -*- coding: utf-8 -*- from PyQt4 import QtCore, QtGui try: _fromUtf8 = QtCore.QString.fromUtf8 exc ...
- 面向对象程序设计-C++ Steam & Vector 【第三次上课笔记】
大家可以下载后用Vim 或者 Sublime Text等文本编辑器查看 Conference: http://blog.csdn.net/candy1232009/article/details/70 ...
- iOS8的屏幕旋转的问题
判断横竖屏.http://www.cocoachina.com/ask/questions/show/121301 //self.cameraView是相机view - (NSUInteger)sup ...
- iOS开发UITableViewCell的选中时的颜色设置
1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...
- c语言‘\0’ ,‘0’, “0” ,0之间的区别
首先比较一下‘\0’和‘0’的区别.有一个共同点就是它们都是字符,在c语言中,字符是按其所对应的ASCII码来存储的,一个字符占一个字节.请翻开你的ASCII字符集表吧,一般在你的C语言教材的附录上, ...
- SpringMVC入门二: 1规范结构, 2简单整合MyBatis
昨天拿springMVC写的helloworld结构不好, 这次先调整一下体系结构 , 然后简单整合一下MyBatis spring的配置还是以注解为主, 不过MyBatis的映射文件什么的还是拿xm ...
- 跟上节奏 大数据时代十大必备IT技能
跟上节奏 大数据时代十大必备IT技能 新的想法诞生新的技术,从而造出许多新词,云计算.大数据.BYOD.社交媒体……在互联网时代,各种新词层出不穷,让人应接不暇.这些新的技术,这些新兴应用和对应的IT ...