jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理
//对外接口
jQuery.extend({
queue: function( elem, type, data ) {//入队。元素、队列名字、存进去的函数
//jQuery.queue( this, type, function( next, hooks ) {})
var queue; if ( elem ) {
type = ( type || "fx" ) + "queue";//不写队列名字就是fx
// $.queue( document , 'q1' , aaa||[aaa,bbb] );
queue = data_priv.get( elem, type );//get方法var cache = this.cache[ this.key( elem ) ];return type === undefined ? cache : cache[ type ];key方法return unlock = elem[ this.expando ];根据元素的唯一标识expando获取在data_priv对象中缓存中的1,2,3,4这个unlock数字,根据unlock这个数字获取cache中的json,根据type获取json中的值
/*
data_priv = {
1(document.203089541586732714850=1):{
name(type):'哈哈'(queue),
q1queue(type):...(queue数组),
}
}
*/ // Speed up dequeue by getting out quickly if this is just a lookup
if ( data ) {//函数名
if ( !queue || jQuery.isArray( data ) ) {//queue没有(函数是不是数组)或者queue有但是函数是数组,注意是数组就会把之前的全部覆盖。
/*
$.queue( document , 'q1' , aaa );
$.queue( document , 'q1' , bbb );
$.queue( document , 'q1' , [ccc] );
*/
queue = data_priv.access( elem, type, jQuery.makeArray(data) );
} else {//queue有(说明q1队列之前加过)并且函数不是数组直接push,注意queue没有的时候queue始终存的是一个数组
queue.push( data );
}
}
return queue || [];
}
}, dequeue: function( elem, type ) {
type = type || "fx";
//只能写jQuery.queue(),不能写queue(),queue()是jQuery类的静态方法,只能通过静态方式调用。
/*
jQuery.extend( {a:function(){alert(1)},b:function(){jQuery.a();}} )
$.b();
*/
var queue = jQuery.queue( elem, type ),//得到type对应的值,是一个数组,
startLength = queue.length,
fn = queue.shift(),//去除数组第一个
hooks = jQuery._queueHooks( elem, type ),
next = function() {
jQuery.dequeue( elem, type );//下一个,不能直接写dequeue,这行语句还没执行完时dequeue是不存在的
}; // If the fx queue is dequeued, always remove the progress sentinel
if ( fn === "inprogress" ) {
fn = queue.shift();
startLength--;
} if ( fn ) { // Add a progress sentinel to prevent the fx queue from being
// automatically dequeued
if ( type === "fx" ) {
queue.unshift( "inprogress" );//inprogress添进去
} // clear up the last queue stop function
delete hooks.stop;
fn.call( elem, next, hooks );//出队的函数执行,
} if ( !startLength && hooks ) {
hooks.empty.fire();
}
}, /*
data_priv = {
1(elem:document.203089541586732714850=1):{
name(type):'哈哈'(queue),
q1queue(type):...(queue数组),
}
}
*/
_queueHooks: function( elem, type ) {
var key = type + "queueHooks";
//有就获取,没有key,value都存在value是json就追加
return data_priv.get( elem, key ) || data_priv.access( elem, key, {
empty: jQuery.Callbacks("once memory").add(function() {
data_priv.remove( elem, [ type + "queue", key ] );
})
});
}
}); jQuery.fn.extend({
//this.queue( type, function( next, hooks ) {
//$('#div').queue('q1',bbb);
queue: function( type, data ) {
var setter = 2;
//$('#div').queue(bbb);
if ( typeof type !== "string" ) {//只传了一个函数,没有type
data = type;
type = "fx";
setter--;
}
///console.log( $('#div').queue('q1') ); 查看
if ( arguments.length < setter ) {
return jQuery.queue( this[0], type );//静态方法调用
} return data === undefined ?
this :
this.each(function() {//$('#div')是一个数组,对每一个设置
var queue = jQuery.queue( this, type, data );//每一个入队 // ensure a hooks for this queue
jQuery._queueHooks( this, type ); if ( type === "fx" && queue[0] !== "inprogress" ) {
jQuery.dequeue( this, type );//第一个入队然后立即出队,调用
}
});
},
dequeue: function( type ) {
return this.each(function() {
jQuery.dequeue( this, type );//每一个出队
});
}, //.delay(2000)
/*
jQuery.fx.speeds = {
slow: 600,
fast: 200,
// Default speed
_default: 400
};
*/
//jQuery.fx = Tween.prototype.init;
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
type = type || "fx";
//queue第二个参数是匿名函数,也添加进去
return this.queue( type, function( next, hooks ) {
var timeout = setTimeout( next, time );
hooks.stop = function() {
clearTimeout( timeout );
};
});
},
clearQueue: function( type ) {
return this.queue( type || "fx", [] );//空数组是真
},
//队列全部执行完之后,再去调用
promise: function( type, obj ) {
var tmp,
count = 1,
defer = jQuery.Deferred(),
elements = this,
i = this.length,
resolve = function() {
if ( !( --count ) ) {
defer.resolveWith( elements, [ elements ] );
}
}; if ( typeof type !== "string" ) {
obj = type;
type = undefined;
}
type = type || "fx"; while( i-- ) {
tmp = data_priv.get( elements[ i ], type + "queueHooks" );
if ( tmp && tmp.empty ) {
count++;
tmp.empty.add( resolve );
}
}
resolve();
return defer.promise( obj );
}
});
jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理的更多相关文章
- jQuery源码分析系列(39) : 动画队列
data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保 ...
- Jquery源码分析之匿名函数的自执行
匿名函数的格式: 格式: (function(){ //代码 })(); //和这个基于jQuery的比较下: $(function(){ alert("this is a test&quo ...
- jquery源码01---(2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理
// optionsCache : { 'once memory' : { once : true , memory : true } } var optionsCache = {}; // once ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- jQuery源码逐行分析学习01(jQuery的框架结构简化)
最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...
- jQuery源码逐行分析学习02(第一部分:jQuery的一些变量和函数)
第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...
- jQuery源码笔记(一):jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
- jquery源码分析(二)——架构设计
要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94) 定义了一些变量和函数jQu ...
- jQuery源码分析笔记
jquery-2.0.3.js版本源码分析 (function(){ (21,94) 定义了一些变量和函数 jQuery = function(){}; (96,283) 给JQ对象,添加一些方法 ...
随机推荐
- BZOJ 4448 主席树+树链剖分(在线)
为什么题解都是离线的-- (抄都没法抄) 搞一棵主席树 1 操作 新树上的当前节点设成1 2 操作 查max(i-xx-1,0)那棵树上这条路径上有多少个点是1 让你找经过了多少个点 查的时候用dee ...
- Android中的Junit测试
在开发中Junit测试可以很方便的帮助开者尽可能早的发现并处理问题,而且使用也非常简单,只需要导入Junit测试相关的jar包并创建测试类,就可以对业务功能进行测试,而不用为了测试在代码中添加输出语句 ...
- Mac上vmware虚拟机Windows10安装JDK8及配置环境
1.jdk8下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.双击下载的jdk进行安装 3.安装成功之 ...
- BZOJ5017 炸弹(线段树优化建图+Tarjan+拓扑)
Description 在一条直线上有 N 个炸弹,每个炸弹的坐标是 Xi,爆炸半径是 Ri,当一个炸弹爆炸时,如果另一个炸弹所在位置 Xj 满足: Xi−Ri≤Xj≤Xi+Ri,那么,该炸弹也会被 ...
- vue使用axios中 this 指向问题
1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...
- 今日SGU 6.5
sgu 160 题意:给你n个数字 数字范围 1 到 m 问你从中取出任意数量的数字使得这些数字的积取模m最大 收获:dp,记录dp的路径 #include<bits/stdc++.h> ...
- Qt 在圆形中贴图片
void Widget::paintEvent(QPaintEvent *) { QPainter p(this); QPixmap pix(":/images/a.jpg"); ...
- 【翻译自mos文章】私有网络所用的协议 与 Oracle RAC
说的太经典了,不敢翻译.直接上原文. 来源于: Network Protocols and Real Application Clusters (文档 ID 278132.1) PURPOSE --- ...
- cocos2d-x 显示触摸操作(显示水波点击效果,用于视频演示)
昨天刚刚參加玩游戏设计大赛, 积累了一些东西. 接下去将会逐个分享出来. 首先是显示触摸操作. 由于要演示我们的作品.使用试玩过程中, 假设没办法显示我们的触摸操作(像录制视频一样, 点击了屏幕某点, ...
- Linux LVM(逻辑卷管理)
Lvm基本应用 什么是LVM? LVM 的全称是 Logical Volume Manager.中文为逻辑卷管理.它是Linux对磁盘分区的一种管理机制.它在传统的硬盘(或硬盘分区)和文件系统之间建立 ...