这两个方法,一个是往里面添加队列,一个是执行队列 也是分静态方法和实例方法,

同样,实例方法最后调用静态方法 源码主要分析一下延迟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()的更多相关文章

  1. js queue dequeue clearQueue stop

      一.queue( [queueName ], newQueue ) 操作欲执行队列方法 第一个参数是队列名称,不写的话默认是fx 第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函 ...

  2. jQuery队列控制方法详解queue()/dequeue()/clearQueue()

    queue(name,[callback]):  当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name') 当有两 ...

  3. jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

    .queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...

  4. hdu 1387(Team Queue) STL

    Team Queue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. C# 集合类 :(Array、 Arraylist、List、Hashtable、Dictionary、Stack、Queue)

    我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...

  6. jQuery.queue源码分析

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 队列是一种特殊的线性表,它的特殊之处在于他只允许在头部进行删除,在尾部进行插入.常用来表示先进先出的操作(FI ...

  7. jQuery源代码学习之七—队列模块queue

    一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...

  8. Team Queue (uva540 队列模拟)

    Team Queue Queues and Priority Queues are data structures which are known to most computer scientist ...

  9. jquery源码学习之queue方法

    队列模块的代码结构 静态方法jQuery下有queue,dequeue,_queueHooks这三种方法:静态方法不建议直接在外部调用: 实例方法.queue,.dequeue,.clearQueue ...

随机推荐

  1. android 图片加载优化,避免oom问题产生

    1,及时回收bitmap,在activity的onstop()和onDestory()里面调用如下代码进行bitmap的回收: // 先判断是否已经回收 if(bitmap != null & ...

  2. 关于odbc连接orcal,用户名密码大小写敏感问题

    在oracle的之前版本时, 你的用户名密码是大小写不敏感的, 但在11g中, 数据库默认密码的大小写是敏感的, 于是我们就知道了一个事实, 那就是jdbc在给oracle密码时, 会将其变成大写,真 ...

  3. git的使用,将本地项目push到github上

    Git教程(推荐): http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000git是先用a ...

  4. ssh: scp命令

    scp 复制命令 Eg. -r /tmp/q1 root@[::]/home 1.命令格式: scp [参数] [原路径] [目标路径] 2.命令功能: scp是 secure copy的缩写, sc ...

  5. laravel5.2/laravel5.3入门指南 Windows 上快速安装并运行 Laravel 5.x

    1 首先要搭建本地服务器环境推荐phpstudy2016及wampServer3.0.6 下载链接可参考 http://www.cnblogs.com/zzcit/p/5823742.html 注意一 ...

  6. POJ 1789 Truck History(Prim+邻接矩阵)

    ( ̄▽ ̄)" #include<iostream> #include<cstdio> #include<cstring> #include<algo ...

  7. POJ 2240 Arbitrage(SPFA+邻接矩阵)

    ( ̄▽ ̄)" #include<iostream> #include<cstdio> #include<cmath> #include<algori ...

  8. Maven项目问题

    Maven项目部署 svn检出的为普通项目 1.普通项目转换为Maven项目: 选择项目右击->Maven4MyEclipse->Update Project 2.tomcat项目空间WE ...

  9. LeetCode OJ 123. Best Time to Buy and Sell Stock III

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  10. poj 2299 Ultra-QuickSort 逆序对模版题

    用树状数组求逆序数 唯一的坑点就是sum要用long long存 直接贴代码了 以后忘了还能直接看 2333…… PS:和hdu3743代码是一样的,因为两个都是逆序对模版题…… #include&l ...