queue(),dequeue()
这两个方法,一个是往里面添加队列,一个是执行队列 也是分静态方法和实例方法,
同样,实例方法最后调用静态方法 源码主要分析一下延迟delay方法,如何起作用的,写的有点仓促,先记录一下
在这里参照了网络上的文章,给推荐一下,介绍的很详细了,作者比较用心:
http://www.html-js.com/card/1083,他是基于1.7的,我这边运行的是1.9的,但是核心思想是一样的
- jQuery.extend({
- queue: function( elem, type, data ) {
- var queue;
- if ( elem ) {
- type = ( type || "fx" ) + "queue";
- queue = jQuery._data( elem, type );
- // Speed up dequeue by getting out quickly if this is just a lookup
- if ( data ) {
- if ( !queue || jQuery.isArray(data) ) {
- queue = jQuery._data( elem, type, jQuery.makeArray(data) );
- } else {
- queue.push( data );
- }
- }
- return queue || [];
- }
- },
- dequeue: function( elem, type ) {
- type = type || "fx";
- var queue = jQuery.queue( elem, type ),
- startLength = queue.length,
- fn = queue.shift(),
//取出钩子对象,如果存在直接从cache中取,没有的话,新存入一个,并返回- hooks = jQuery._queueHooks( elem, type ),
//写死的next函数,调用next()意味着执行dequeue一次- next = function() {
- jQuery.dequeue( elem, type );
- };
- // If the fx queue is dequeued, always remove the progress sentinel
- if ( fn === "inprogress" ) {
- fn = queue.shift();
- startLength--;
- }
- hooks.cur = fn;
- if ( fn ) {
- // Add a progress sentinel to prevent the fx queue from being
- // automatically dequeued
- if ( type === "fx" ) {
- queue.unshift( "inprogress" );
- }
- // clear up the last queue stop function
- delete hooks.stop;
//重点说一下这里,elem域调用fn(queue的第一个函数),同时传递next函数(jQuery.dequeue( elem, type ))以及hooks
//这个钩子对象平时没啥用就是清理key的时候调用empty返回的callback对象的fire方法,
//第二个作用就是用在延迟定义里面,大家可以看一下下面的源码,它把这个钩子对象又添加了一个stop函数,意味着,这个队列可以清除定时的设置,清除之后,后面的就不执行了- fn.call( elem, next, hooks );
- }
- if ( !startLength && hooks ) {
- hooks.empty.fire();
- }
- },
- // not intended for public consumption - generates a queueHooks object, or returns the current one
- _queueHooks: function( elem, type ) {
- var key = type + "queueHooks";
- return jQuery._data( elem, key ) || jQuery._data( elem, key, {
//这里利用了callbacks对象的add方法,将来fire的时候可以直接把elem元素中的这些key清除掉- empty: jQuery.Callbacks("once memory").add(function() {
- jQuery._removeData( elem, type + "queue" );
- jQuery._removeData( elem, key );
- })
- });
- }
- });
- jQuery.fn.extend({
- queue: function( type, data ) {
- var setter = 2;
- // 如果遇到这样的参数: $().queue( function(){} );
// 则重置下参数
- if ( typeof type !== "string" ) {
- data = type;
- type = "fx";
- setter--;
- }
- if ( arguments.length < setter ) {
- return jQuery.queue( this[0], type );
- }
- return data === undefined ?
- this :
- this.each(function() {
- 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 );
- });
- },
- // Based off of the plugin by Clint Helfers, with permission.
- // http://blindsignals.com/index.php/2009/07/jquery-delay/
- delay: function( time, type ) {
- time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
- type = type || "fx";
- 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", [] );
- },
- // Get a promise resolved when queues of a certain type
- // are emptied (fx is the type by default)
- 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 = jQuery._data( elements[ i ], type + "queueHooks" );
- if ( tmp && tmp.empty ) {
- count++;
- tmp.empty.add( resolve );
- }
- }
- resolve();
- return defer.promise( obj );
- }
- });
下面引用网络上的一个例子,大家有兴趣可以运行一下,主要对delay的理解
- var obj = {};
- $.queue(obj, 'say', function(next) {
- document.write('hello ');
- next();
- });
- $.queue(obj, 'say', function() {
- document.write('world');
- });
- $.dequeue(obj, 'say');
- document.write("...............");
- var elem = {};
//这里没用链式表达式本意是debug用的,这里的function传参也是参照dequeue中的fn.call( elem, next, hooks );这样就可以连着调用2次queue了- var e = $(elem).queue('handle', function(next) {
- document.write('first handle');
- next();
- });
- e.delay("1000", 'handle');
- e.queue('handle', function() {
- document.write('second handle');
- });
- e.dequeue('handle');
- /*
- *
- dequeue中有一段话
- var fn = queue.shift();
- if ( fn ) {
- delete hooks.stop;
- fn.call( elem, next, hooks );
- }
- 如果第一个函数是delay进去的函数的话,则赋予了elem.handleququeHooks.stop
- fn.call()这个函数把hooks传入,next原封不动,只是用setTimeout定时了
- var next = function() {
- jQuery.dequeue( elem, type );
- };
- delay: function( time, type ) {
- time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
- type = type || "fx";
- return this.queue( type, function( next, hooks ) {
- var timeout = setTimeout( next, time );
- hooks.stop = function() {
- clearTimeout( timeout );
- };
- });
- }
- *
- *
- *
- *
- */
- var stopFn = $._data(elem, "handlequeueHooks").stop;
- // function () { clearTimeout( timeout ); }
- console.log(stopFn);
- // 停止运行
- //stopFn();
- // 手动运行后续处理函数
- // 这里如果注释掉的话,第二个处理函数就不会执行,
- // 这里我们也看到了关于第二个参数: hooks 的使用方式。
- //$(elem).dequeue('handle');
queue(),dequeue()的更多相关文章
- js queue dequeue clearQueue stop
一.queue( [queueName ], newQueue ) 操作欲执行队列方法 第一个参数是队列名称,不写的话默认是fx 第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函 ...
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name') 当有两 ...
- jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
- hdu 1387(Team Queue) STL
Team Queue Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- C# 集合类 :(Array、 Arraylist、List、Hashtable、Dictionary、Stack、Queue)
我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...
- jQuery.queue源码分析
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 队列是一种特殊的线性表,它的特殊之处在于他只允许在头部进行删除,在尾部进行插入.常用来表示先进先出的操作(FI ...
- jQuery源代码学习之七—队列模块queue
一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...
- Team Queue (uva540 队列模拟)
Team Queue Queues and Priority Queues are data structures which are known to most computer scientist ...
- jquery源码学习之queue方法
队列模块的代码结构 静态方法jQuery下有queue,dequeue,_queueHooks这三种方法:静态方法不建议直接在外部调用: 实例方法.queue,.dequeue,.clearQueue ...
随机推荐
- Struts2第四天
Struts2第四天 昨天: 自定义的拦截器:继续methodFilterInterceptor,可以指定哪些方法需要拦截或者不拦截. Intercepters(配置拦截器),intercepter( ...
- hdu_5324_Boring Class(cdq分治+树状数组)
题目链接:hdu_5324_Boring Class 题意: 给出n个二维点对,求LIS长度和编号字典序最小的LIS(x非增,y非减) 题解: dp[i]=max(dp[j]) (i>j,l[i ...
- submit 防止重复提交 --禁止提交
<form action="/apply/apply" method="POST" id="indentForm"> <p ...
- Storm 集群安装配置
本文详细介绍了 Storm 集群的安装配置方法.如果需要在 AWS 上安装 Storm,你应该看一下 storm-deploy 项目.storm-deploy 可以自动完成 E2 上 Storm 集群 ...
- HDU 1242 Rescue(BFS),ZOJ 1649
题目链接 ZOJ链接 Problem Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The ...
- BestCoder Round #86 A B C
这次BC终于不像上次一样惨烈 终于A了三题…… 终测ing…… 发一波题解…… A.Price List A题十分无脑 只要把所有数加起来存到sum里 询问的时候大于sum输出1 否则输出0就行了…… ...
- css3的特效拓展...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ios 将彩色照片转化成黑白等几种类型
-(UIImage *)changeColoursImageTograyScaleImage:(UIImage *)anImage type:(int)type { CGImageRef imageR ...
- grub引导centos
下面来主要讲一下在grub下来引导centos: 其步骤如下; a 进入grub的命令模式. b 先熟悉一下grub 的一些命令 grub>help c 熟悉一下cat命令 d ro ...
- Shell脚本中让进程休眠的方法(sleep用法)
有时候写Shell的脚本,用于顺序执行一系列的程序. 有些程序在停止之后并没能立即退出,就例如有一个 tomcat 挂了,就算是用 kill -9 命令也还没瞬间就结束掉. 这么如果 shell 还没 ...