回调函数的应用场景index都有什么用

问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
如下代码,index的值输出是0
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&test&/title&
&link rel="stylesheet" href="style.css"
&script src="/jquery/1.9.1/jquery.js"&&/script&
&style type="text/css"&
height: 100
&p&&span&123&/span&&/p&
$("p").css("width",function(index,value){
console.log(index,value);
//index值为0,不知道什么意思
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
&style type="text/css"&
height: 100
width: 100
&p&&span&123&/span&&/p&
&p&&span&123&/span&&/p&
代码稍改一下你就能明白了
$('xxxx')返回的是一个元素集合,一种类似数组的结构(但不是数组),这index就相当于数组里的index可以看下这里:
分享到微博?
Hi,欢迎来到 SegmentFault 技术社区!⊙▽⊙ 在这里,你可以提出编程相关的疑惑,关注感兴趣的问题,对认可的回答投赞同票;大家会帮你解决编程的问题,和你探讨技术更新,为你的回答投上赞同票。
明天提醒我
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
如下代码,index的值输出是0
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&test&/title&
&link rel="stylesheet" href="style.css"
&script src="/jquery/1.9.1/jquery.js"&&/script&
&style type="text/css"&
height: 100
&p&&span&123&/span&&/p&
$("p").css("width",function(index,value){
console.log(index,value);
//index值为0,不知道什么意思
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
&style type="text/css"&
height: 100
width: 100
&p&&span&123&/span&&/p&
&p&&span&123&/span&&/p&
代码稍改一下你就能明白了
$('xxxx')返回的是一个元素集合,一种类似数组的结构(但不是数组),这index就相当于数组里的index可以看下这里:
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
这种问题应该学会查阅
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
运行页面,打开console或者页面上打上debug,调试到当前位置,你看看$('p')是什么,你就明白了
学习自己调试,然后查阅资料
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
index应为元素的下标
同步到新浪微博
分享到微博?
Hi,欢迎来到 SegmentFault 技术社区!⊙▽⊙ 在这里,你可以提出编程相关的疑惑,关注感兴趣的问题,对认可的回答投赞同票;大家会帮你解决编程的问题,和你探讨技术更新,为你的回答投上赞同票。
明天提醒我
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:1、JavaEE(59)
回调函数在框架中的使用是家常便饭,无论是前台框架还是后台框架,譬如,Jquery的Ajax函数就封装了回调的功能,Spring在整合Hibernate的时候也封装了回调的功能,那为什么要有回调那?回调函数到底有什么作用那?小编谈一下自己的见解。
回调函数的作用
为什么设置回调函数,这个问题困扰了好长一段时间,小编看了一些框架的源码后才恍然大明白,回调函数的作用。读者不用着急,先跟着我看个JS的小Demo,通过Demo来理解回调函数。
window.onload=function(){
//封装回调函数
function callBack(a,b){
function testCallBack(){
//注意:此时将整个function(){}.....作为callBack函数的第二个参数
callBack("begin testCallback",function(){
alert("test callback success");
testCallBack();
看完了这个小demo,如果读者还有点迷糊,那么,小编提问几个问题。
问题1:在封装callBack()函数的时候将callBack()函数的功能写死了吗?
问题2:callBack函数中的b()方法到底执行什么样的功能?
问题1:callBack()函数的功能不能写死了,如果写死了,就失去了回调函数的意义了,因为callBack()自己也不知道到底执行什么功能,所以不能callBack()将这个函数的作用写“活”,置于callBack到底要实现什么功能?callBack自己都不知道,只有callBack的调用者才知道。
问题2:b()就是callBack调用者让callBack()函数做的具体事情。
到现在理解回调函数的功能了吧?就是因为回调函数自己都不知道自己究竟要干什么事情,所以回调函数将具体要完成的功能交给调用者来写,自己只是负责调用。回想一下Jquey的Ajax()的写法,以及$(“#id”).onClick(function(){}),还有jsonp的功能,这些都是回调啊!
小编在前言中说过,回调不仅在前台框架中使用,它是一种设计思想,是一种机制,在特定的需求场合下来解决某些问题。例如:在我们经常用的Spring中也有用到,下面小编就举个栗子!
Spring整合Hibernate
Spring在整合Hibernate的时候,将Hibernate的很多操作都封装在HibernateTemplate中,包括经常用session的一些操作,那么,如果我们想在Spring中操作Hibernate中一些原生的方法,那该怎么办?譬如说我要写一条多表的联合查询,条件也很复杂,像这样的功能HibernateTemplate并没有给我们封装,那怎么办?别着急,Hibernate给我们预留着接口了,这就是HibernateCallback的作用。下面来看个Demo。
public class ElecUserDaoImpl
extends CommonDaoImpl&ElecUser& implements IElecUserDao {
public List&ElecUser& findCollectionByConditionNoPageWithSql(String condition,
final Object[] params, Map&String, String& orderby) {
String sql="select o.userID,o.logonName,o.userName,a.ddlName,o.contactTel,o.onDutyDate,b.ddlName " +
" from elec_user"+ " o inner join elec_systemddl a on o.sexID=a.ddlCode and a.keyword='性别'" +
" inner join elec_systemddl b on o.postID=b.ddlCode and b.keyword='职位'" +
" where 1=1";
String orderbyCondition = this.orderbySql(orderby);
final String finalSql = sql + condition + orderbyC
List&Object[]& list=this.getHibernateTemplate().execute(new HibernateCallback(){
public Object doInHibernate(Session session)
throws HibernateException, SQLException {
Query query =session.createSQLQuery(finalSql)
.addScalar("o.userID")
.addScalar("o.logonName")
.addScalar("o.userName")
.addScalar("a.ddlName")
.addScalar("o.contactTel")
.addScalar("o.onDutyDate")
.addScalar("b.ddlName");
if(params!=null && params.length&0){
for(int i=0;i&params.i++){
query.setParameter(i, params[i]);
return query.list();
List&ElecUser& userList =new ArrayList&ElecUser&();
if (list!=null && list.size()&0) {
for (Object [] o : list) {
ElecUser elecUser = new ElecUser();
elecUser.setUserID(o[0].toString());
elecUser.setLogonName(o[1].toString());
elecUser.setUserName(o[2].toString());
elecUser.setSexID(o[3].toString());
elecUser.setContactTel(o[4].toString());
elecUser.setOnDutyDate((Date)o[5]);
elecUser.setPostID(o[6].toString());
userList.add(elecUser);
return userL
看完这个Demo是不是感觉回调太牛X了,能解决很多问题,框架中的回调就是这么封装,这就是回调的魅力!
&&相关文章推荐
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:220008次
积分:10808
积分:10808
排名:第1491名
原创:177篇
评论:4230条
文章:10篇
阅读:3328
阅读:17277
阅读:19900
阅读:5975
阅读:4502
阅读:7767
(5)(5)(7)(4)(4)(4)(4)(4)(3)(5)(4)(6)(9)(4)(4)(4)(5)(4)(5)(10)(5)(3)(2)(6)(8)(4)(6)(5)(4)(5)(3)(3)(4)(5)(2)(7)(6)jQuery.Callbacks()回调函数队列用法详解
作者:懒人
字体:[ ] 类型:转载 时间:
这篇文章主要介绍了jQuery.Callbacks()回调函数队列用法,结合实例形式详细分析了jQuery.Callbacks()回调函数队列的功能、控制标志含义与相关注意事项,需要的朋友可以参考下
本文实例讲述了jQuery.Callbacks()回调函数队列用法。分享给大家供大家参考,具体如下:
1、jQuery.Callbacks
The jQuery.Callbacks() function, introduced in version 1.7, returns a multi-purpose object that provides a powerful way to manage callback lists. It supports adding, removing, firing, and disabling callbacks.
The $.Callbacks() function is internally used to provide the base functionality behind the jQuery $.ajax() and $.Deferred() components. It can be used as a similar base to define functionality for new components.
接下来,我们分别看下四个标准的控制标志。
创建的 callbacks 对象只允许被 fireWith() 一次 [注意:方法fire() 是 fireWith() 的外观模式]。
var callbacks = $.Callbacks("once");
callbacks.add(function(){console.log("f1");});
callbacks.fire(); //输出 "f1"
callbacks.fire(); //什么也不发生,在源码中已经禁用了 list.disable()
1.2 memory
在调用 add() 方法时,如果这时 callbacks队列 满足 fired && firing = false(真执行完毕) && memory(需要在构造函数指定),那么add() 进去的回调函数会立即执行,而这个 add 进去的回调函数调用时的参数存储在 memory 变量中。memory 变量用于存储最后一次调用 callbacks.fireWith(...) 时所使用的参数 [context, arguments]。
If the Callbacks object is created with the "memory" flag as its argument, additional functions may be added and fired after the callback list is locked.
$(function($){
var callbacks = $.Callbacks("memory");
callbacks.add(function(){console.log("f1");});
callbacks.fire(); //输出 "f1",这时函数列表已经执行完毕!
callbacks.add(function(){console.log("f2");});
//memory作用在这里,没有fire,一样有结果: f2
callbacks.fire(); //重新触发一次,输出 f1 f2。 firingStart = 0
//与once一起使用
callbacks = $.Callbacks("once memory");
callbacks.add(function(){console.log("f3");});
callbacks.fire(); //输出 "f3",这时函数列表已经执行完毕!
callbacks.add(function(){console.log("f4");});
//没有fire,一样有结果: f4
callbacks.fire(); //由于为"once",这里将什么也不执行
1.3 unique
回调函数列表中的函数是否可以重复,该特性与 add() 方法有关,可以避免在回调函数列表中加入多个相同回调函数。
var f1 = function(){console.log("f1");};
var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.add(f1);
callbacks.fire(); //输出 f1 f1
//传递参数 "unique"
callbacks = $.Callbacks("unique");
callbacks.add(f1); //有效
callbacks.add(f1); //添加不进去
callbacks.fire(); //输出: f1
1.4 stopOnFalse
默认情况下,当执行 fireWith() 方法时,整个回调函数列表中的所有函数都会顺序执行,但如果设置了stopOnFalse,那么当某个函数返回false时,后边的函数将不再执行。即使设置了memory,再次添加的函数也不会执行了,即一旦某个函数返回 false 的情况下,会禁用 memory 功能。但如果没设置”once”,再次调用fire可以重新触发该callbacks。
var f1 = function(){console.log("f1"); return false}; //注意
var f2 = function(){console.log("f2");};
var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.add(f2);
callbacks.fire(); //输出 f1 f2
callbacks = $.Callbacks("memory stopOnFalse");
callbacks.add(f1);
callbacks.add(f2);
callbacks.fire(); //只输出 f1
callbacks.add(function(){console.log("f3");}); //不会输出,memory已经失去作用了
callbacks.fire(); //重新触发,输出f1
2. memory 回调队列
var i = 0;
var inc = function (s){
alert(i +"$" + s);
var callbacks = $.Callbacks('memory');
callbacks.add(function iteral() {
callbacks.add(inc);
if (i &= 1) {
callbacks.fire(i);
callbacks.fire(i);
callbacks.add(inc);
list = [];
list = [it];
---&fire(0), i=0
1、list = [it, inc]
2、push(fire(0))
3、i++ [inc(0)] (i=1)
shift()---&fire(0), i=1
1、list = [it, inc, inc];
2、push(fire(1)),
3、i++ [inc(0)]
4、i++ [inc(0)] (i=3)
shift()---&fire(1),i=3
1、list = [it, inc, inc, inc];
2、i++ [inc(1)]
3、i++ [inc(1)]
4、i++ [inc(1)] (i=6)
---&add(inc), i=6, memory=[this,1]
1、i++ [inc(1)] (i=7)
3、 jQuery.CallBacks 源码
说明:为了便于理解,修改了部分源码,减少了一些功能~~~
jQuery.Callbacks = function (options) {
// string --& object 改进建议:将未配置的参数缺省为false,而不是undefined。便于程序阅读和控制.
options = optionsCache[options] || createOptions(options);
var firing,
memory, //Last fire value [context, args] (for memory lists)
firingLength,
firingIndex,
firingStart,
list = [],
stack = options.once === true ? false : [], // Stack of fire calls for repeatable lists
fire = function (data) { // data --& [context, args]
memory = !!options.memory && // false OR [context, arguments]
firingIndex = firingStart || 0;
firingStart = 0;
firingLength = list.
// 这里 list 放在条件判断中是因为执行回调函数可能会改变 list 的状态,比如 this.disable()。
for ( ; list && firingIndex & firingL firingIndex++) {
if (list[firingIndex].apply(data[0], data[1]) === false && options.stopOnFalse === true) {
memory = // 禁止 memory 功能,这样调用 add() 增加新回调函数不会立即自动调用
if (list) {
if (stack) {
//进入条件: fired && firing === false && stack, 实现递归调用
if (stack.length) {
fire(stack.shift()); // [[context1, arguments1], [context2, arguments2]]
} else if (memory) {
// 进入条件: fired && firing === false && stack === undefined && 有memory字段(memory变量只能通过fire()函数修改)
// 这里的 list = [],主要是用于性能优化,以防该对象长时间不执行,占用系统内存
list = [];
// 进入条件: fired && firing === false && stack === undefined && 没有memory字段, 说明必要继续保留的必要
self.disable();
add: function() {
if (list) {
//几乎所有API都应该绑定这个条件,因为我们需要处理队列
var originLength = list.
jQuery.each(arguments, function( _, arg) {
if (jQuery.type(arg) === "function") {
// (!(options.unique && self.has(arg))) unique字段的作用
if (!options.unique || !self.has(arg)) {
list.push(arg);
if (firing === true) {
// 进入条件: 说明正在执行回调函数队列中,而当前执行的这个回调函数激活了add()函数,及时维护循环边界
firingLength = list.
} else if (memory) {
// 进入条件: memory && fired && firing === false, 说明之前的 fire() 行为已经完全结束
firingStart = originL
fire(memory);
remove: function() {
if (list) {
jQuery.each(arguments, function( _, arg) {
while ((lastIndex = jQuery.inArray(arg, list, lastIndex)) &= 0) {
list.splice(lastIndex, 1);
if (firing === true) {
// 及时更新边界条件,实现智能处理
if (lastIndex &= firingLength) {
firingLength--;
if (lastIndex &= firingIndex) {
firingIndex--;
has: function (func) { //这个API有两个功能,根据单一职责角度来说,应该增加一个 isNotEmpty() 接口(非空)
return func ? jQuery.inArray(func, list) & -1 : !!(list && list.length);
empty: function() {
list = [];
disable: function() { // 彻底禁用该对象, stack禁用, memory禁用
list = stack = memory =
disabled: function() {
lock: function() {
// 如果memory没有存储调用状态,直接禁用这个对象(可能是从未调用就被锁定,或者没有memory字段)
if (!memory) {
self.disable();
locked: function() {
fireWith: function (context, args) {
args = args || [];
var data = [context, args];
if (list && (fired === false || stack) ) {
if (firing) {
// 进入条件:
firing === true && stack
说明当前正在执行回调函数队列
stack.push(data);
// stack其实是一个队列结构,这里用 stack 有些混淆
// 进入条件一: firing === false && fired === false
说明从来没有 fire()过
// 进入条件二: firing === false && fired === true && stack = [] 说明至少调用过一次,而且当前允许多次调用,可以通过lock()锁定
fire(args);
fire: function() {
self.fireWith(this, arguments);
fired: function() {
4、胡思乱想
jQuery.Callbacks() 方法的核心是 fire() 方法,将该 fire() 方法被封装在函数中不可直接访问,因此像 memory、firing、fired 这些状态对于外部上下文来说是不可更改的。
还有需要注意的是,如果回调函数中使用了 this 对象,可以直接用这个 this 来访问self对象的公有API。当然,也可以用 fireWith() 自己指定 this 的引用对象。
jQuery.Callbacks()的核心思想是 Pub/Sub 模式,建立了程序间的松散耦合和高效通信。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 回调函数的应用场景 的文章

 

随机推荐