`
zhouyrt
  • 浏览: 1158792 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

读jQuery之二十一(队列queue)

 
阅读更多

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

 

分享到:
评论

相关推荐

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

    本篇文章将详细解析jQuery中的队列控制方法:`queue()`, `dequeue()`, 和 `clearQueue()`。 ### jQuery的队列 jQuery的队列主要用于管理和执行一系列同步或异步操作。这些操作可以是动画、函数调用或其他任何需要...

    jQuery中queue()方法用法实例

    jQuery中的queue()方法是一个非常重要且实用的功能,它允许开发者对一个元素上运行的函数队列进行操作,无论是查看还是修改这些队列。接下来,我们将深入探讨queue()方法的功能、定义及使用技巧,并结合实例来帮助...

    Jquery队列动画特效

    **jQuery队列动画特效详解** 在前端开发中,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。尤其在处理动画效果时,jQuery的队列功能提供了灵活且高效的解决方案。本文将深入探讨jQuery队列函数的使用以及...

    Plupload + jquery.plupload.queue 批量上传 和 plupload.full单个上传

    `jquery.plupload.queue` 插件在Plupload的基础上添加了队列管理功能,允许用户按照需求调整文件上传的顺序,甚至可以取消或重新上传某个文件。此外,这个插件还提供了直观的用户界面,能够展示每个文件的上传进度,...

    jquery队列queue与原生模仿其实现方法分享

    对于一个元素上执行animate方法加动画,jQuery内部也会将其加入名为 fx 的函数队列。而对于多个元素要依次执行动画,则必须我们手动设置队列进行了。 一个例子,要两个div依次向左移动: 代码如下:<div id=”b

    ajaxQueue:基于jquery的Ajax请求队列

    基于jquery的Ajax请求队列 用于处理优先ajax与一般ajax请求 用法 var handler = AjaxQueue.setup(), // 实例化队列对象 priority = 0; // 优先级为0是普通请求,1为高级请求。 高级请求会优先发送 // 向队列中添加...

    jQuery中队列queue()函数的实例教程_.docx

    jQuery中的队列功能是通过`queue()`函数实现的,它允许开发者控制JavaScript函数的执行顺序,特别是对于动画效果的管理非常有用。队列是按照先进先出(FIFO)的原则工作的,即先加入队列的函数会先被执行。在jQuery...

    2014-12-28-深入理解jQuery(6)——Queue1

    本文将详细探讨jQuery队列的源码结构、基本使用方法以及源码分析。 1. 源码结构 jQuery的队列功能由`.extend()`和`.fn.extend()`方法扩展到jQuery核心和jQuery对象上。主要的方法包括: - `jQuery.extend({queue:...

    前端项目-jquery-ajaxQueue.zip

    《前端项目:jQuery与ajaxQueue深度解析》 在前端开发中,jQuery库以其简洁的API和强大的功能,一直是开发者们的首选工具之一。本项目“前端项目-jquery-ajaxQueue”聚焦于一个特定的jQuery插件——ajaxQueue,它为...

    利用Jquery队列实现根据输入数量显示的动画

    JQuery队列是一种特殊的数组,用于管理页面上发生的各种动画事件。在JQuery中,所有的动画方法如.show()、.hide()、.fadeIn()、.fadeOut()以及许多自定义动画方法都可以被添加到队列中进行排队执行。本文介绍的利用...

    jQuery动画队列特效代码.zip

    这个“jQuery动画队列特效代码.zip”压缩包很显然是为了展示如何利用jQuery来构建富有动态性的动画效果。这里我们将深入探讨jQuery动画队列特效的相关知识点。 首先,jQuery的动画效果主要通过`.animate()`方法实现...

    jquery 动画处理1-queue使用

    当我们调用`queue(name)`时,如果没有指定`name`,则默认使用`fx`队列,这是jQuery处理动画的默认队列。如果提供了`name`,我们可以创建自定义的队列,用于处理非动画的任务。 例如,如果我们想让一个元素先淡入,...

    jquery.ajaxQueue:关于使用jQuery的效果队列进行Ajax排队的概念jQuery对象的证明

    jQuery ajaxQueue ajaxQueue是一个概念证明jQuery对象,用于使用jQuery的... 它既简单又轻巧,并且不够健壮,但是应该为您提供有效地滥用jQuery的队列系统以适合您的项目所需的起点;) 在以下位置查看有效的演示: :

    jquery-ajaxqueuer:ajax队列的jquery插件

    jquery plugin for ajax queue,jQuery Ajax队列扩展。 ####参数说明 $.ajaxQueuer([ajax队列], {配置}); 配置项(具有优先级): type String 请求方式,默认为GET async Boolean 是否为异步,默认为false,即...

    Jquery函数队列

    其中,"函数队列"(Function Queue)是jQuery提供的一种管理异步操作的重要机制。它允许开发者按照特定顺序执行一系列函数,确保任务的有序进行,尤其在处理动画和DOM操作时显得尤为重要。 函数队列的核心在于`$....

    JQuery中queue方法用法示例

    在jQuery中,`queue()`方法是用来管理元素上执行的函数队列,特别是在处理动画和事件时。这个方法允许我们查看、添加或者清除指定元素上的函数序列。`queue()`方法主要适用于那些使用jQuery动画效果的场景,例如`...

Global site tag (gtag.js) - Google Analytics