queue模块在jQuery中分在Effects中,搜索整个库会发现queue也仅在特效模块effects.js中被使用。jQuery抽取出独立的命名空间给queue,说明除了内部Effects模块使用外,客户端程序员可以充分发挥聪明才智使用queue来构建非动画API。
queue模块向外开放的API分别是
- 挂在$上的$.queue、$.dequeue、$._queueHooks(仅内部)
- 挂在jQuery对象上的有queue、dequeue、delay、clearQueue、promise
按照jQuery的惯例,挂在$上的方法属于低级API,挂在jQuery对象上的才是经常使用的。
一般低级API是为高级API服务的,即 queue内部会使用$.queue, dequeue内部会使用$.dequeue。这里实际是实现为一个队列,$.queue是入列,$.dequeue是出列。
一、$.queue
这个方法有两个作用,它既是setter,又是getter。第一个参数elem是DOM元素,第二个参数type是字符串,第三个参数data可以是function或数组。
1. 设置指定名字的queue
function cb1() {alert(1)} function cb2() {alert(2)} var arr = [cb1, cb2]; $.queue(el, 'mx', cb1); // 第三个参数为function $.queue(el, 'xm', arr); // 第三个参数为数组
2. 这时可以取到存入的callbacks
var cbs1 = $.queue(el, 'mx'); // [cb1] var cbs2 = $.queue(el, 'xm'); // [cb1, cb2]
$.queue内部使用 $._data方法,将数据保存下来。默认type/queueName使用 "fx" + queue。$.queue的实现很简单,代码不过15行,即取缓存对象queue,如果不存在则初始化为一个空对象,然后将data存入,如果存在则直接将data push到数组中。
二、$.dequeue
将回调函数出列执行,每调用一次仅出列一个,因此当回调有N个时,需要调用$.dequeue方法N次元素才全部出列。$.dequeue的第一个参数是dom元素,第二个参数是queueName
function ff1() {console.log(1)} function ff2() {console.log(2)} function ff3() {console.log(3)} var p = $('p')[0]; $.queue(p, 'mx1', ff1); $.queue(p, 'mx1', ff2); $.queue(p, 'mx1', ff3); // 每2秒调用一次$.dequeue,依次输出1,2,3 setInterval(function() { $.dequeue(p, 'mx1') }, 2000);
回调函数的上下文是dom元素,参数是next函数和hooks对象
var p = $('p')[0]; function func(next, hooks) { console.log(this); console.log(next); console.log(hooks); } $.queue(p, 'mx', func); $.dequeue(p, 'mx'); // p, function, [object Object]
next内部仍然调用$.dequeue,这样可以接着执行队列中的下一个callback。$.dequeue里的hooks是当队列里所有的callback都执行完后(此时startLength为0)进行最后的一个清理工作,
if ( !startLength && hooks ) { hooks.empty.fire(); }
hooks.empty是一个jQuery.Callbacks对象,而它则是定义在$._queueHooks里
_queueHooks: function( elem, type ) { var key = type + "queueHooks"; return jQuery._data( elem, key ) || jQuery._data( elem, key, { empty: jQuery.Callbacks("once memory").add(function() { jQuery._removeData( elem, type + "queue" ); jQuery._removeData( elem, key ); }) }); }
以上就是queue的全部了,本质是利用Array的push和shift来完成先进先出(First In First Out),但这里有个缺陷,jQuery的queue从1.1开始就是为effects模块服务的,因此queue里存的都是function。个人觉得如果只存function,应该对data参数做个严格类型判断,如果不是function则抛异常。但目前的版本没有做严格判断,如果我存的不是function,这样dequeue时会报错。如下
var p = $('p')[0]; $.queue(p, 'mx1', {}); // 注意第三个参数是对象,非function $.dequeue(p, 'mx1'); // fn.call 报错,因为fn不是function
三、queue
知道了$.queue,queue就很好理解了,它无非是内部调用了下$.queue。queue比$.queue 少了第一个参数,内部使用this代替第一个参数。
function ff1() {console.log(1)} function ff2() {console.log(2)} function ff3() {console.log(3)} var $p = $('p'); $p.queue('mx', ff1); $p.queue('mx', ff2); $p.queue('mx', ff3);
这样,三个function就入列了,列名是"mx"。 取队列元素只需传一个列名如"mx"
var queue = $p.queue('mx'); // [ff1, ff2, ff3]
还有个技巧就是,如果使用jQuery默认的队列"fx",可以只传data
function ff1() {console.log(1)} function ff2() {console.log(2)} function ff3() {console.log(3)} var $p = $('p'); $p.queue(ff1); $p.queue(ff2); $p.queue(ff3);
另外一点,当使用默认列名"fx"时,它会调用$.dequeue出列执行下,源码如下
if ( type === "fx" && queue[0] !== "inprogress" ) { jQuery.dequeue( this, type ); }
四、dequeue
dequeue则更是未添加任何特殊处理,直接调用的$.dequeue,见源码
dequeue: function( type ) { return this.each(function() { jQuery.dequeue( this, type ); }); },
五、delay
delay用来延迟后续添加的callback的执行,第一个参数time是延迟时间(另可使用"slow"和"fast"),第二个是队列名。
function cb() { console.log(1); } var $p = $('p'); $p.delay(2000, 'mx').queue('mx', cb); $p.dequeue('mx'); // 2秒后输出1
如果是这样
function ff1() {console.log(1)} function ff2() {console.log(2)} var $p = $('p'); $p.queue('mx', ff1); $p.delay(4000, 'mx'); $p.queue('mx', ff2); $p.dequeue('mx'); // 立即输出1 $p.dequeue('mx'); // 4秒后输出2
六、clearQueue
顾名思义,清空所有队列。没什么好说的,源码如下,直接使用一个空数组覆盖之前的数组队列了。
clearQueue: function( type ) { return this.queue( type || "fx", [] ); },
七、promise
这个方法返回一个promise对象,promise对象既是前面提到的Deferred对象的阉割版。你可以使用done、fail、progress添加,但不能触发。用在queue模块里有特殊意义,比如done它指queue里所有function都执行后才执行done添加的。如
function ff1() { alert(1) } function ff2() { alert(2) } function succ() { alert('done') } $body = $('body') $body.queue('mx', ff1); $body.queue('mx', ff2); var promise = $body.promise('mx'); promise.done(succ); setInterval(function() { $body.dequeue('mx') // 先弹出1,2,最后是"done" }, 1500)
注:阅读版本为1.9.1
相关推荐
NULL 博文链接:https://nuysoft.iteye.com/blog/1189156
对于一个元素上执行animate方法加动画,jQuery内部也会将其加入名为 fx 的函数队列。而对于多个元素要依次执行动画,则必须我们手动设置队列进行了。 一个例子,要两个div依次向左移动: 代码如下:<div id=”b
NULL 博文链接:https://axl234.iteye.com/blog/1884310
jQuery ajaxQueue ajaxQueue是一个概念证明jQuery对象,用于使用jQuery的... 它既简单又轻巧,并且不够健壮,但是应该为您提供有效地滥用jQuery的队列系统以适合您的项目所需的起点;) 在以下位置查看有效的演示: :
Jquery队列函数使用,动画特效,用于学习,方便初学者使用
基于jquery的Ajax请求队列 用于处理优先ajax与一般ajax请求 用法 var handler = AjaxQueue.setup(), // 实例化队列对象 priority = 0; // 优先级为0是普通请求,1为高级请求。 高级请求会优先发送 // 向队列中添加...
本文实例讲述了JQuery中queue方法用法。分享给大家供大家参考,具体如下: jquery的queue方法 显示或操作在匹配元素上执行的函数队列 意思就是对匹配上的元素,显示作用在这个元素上的函数的个数,也就是上述所说的...
jQuery的queue()方法和dequeue()方法配合使用,可以完成对函数队列的操作。 实现步骤: 1、新建一个函数数组,把动画函数依次放进去; 2、调用queue()方法将动画函数数组加入队列中; 3、利用dequeue()方法取出函数...
如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列;设置队列(替换队列、追加函数)时,则为每个匹配元素都分别进行设置。 该函数属于jQuery对象(实例)。如果需要移除并执行队列中的第一个...
jQuery 3.1 参考手册 ...队列控制 queue(e,[q]) dequeue([queueName]) clearQueue([queueName]) 插件机制 jQuery.fn.extend(object) jQuery.extend(object) 多库共存 jQuery.noConflict([ex])
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
jquery plugin for ajax queue,jQuery Ajax队列扩展。 ####参数说明 $.ajaxQueuer([ajax队列], {配置}); 配置项(具有优先级): type String 请求方式,默认为GET async Boolean 是否为异步,默认为false,即...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
第三部分(第3~7章)详细分析了底层支持模块的源码实现,包括选择器Sizzle、异步队列Deferred Object、数据缓存Data、队列Queue、浏览器功能测试Support。 第四部分(第8~14章)详细分析了功能模块的源码实现,...