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

感谢分享:http://mrthink.net/jqueryapi-queue-dequeue/

jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.  

先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.

css与html部分我就不贴出来了,DEMO演示中有. 若按常规做法, 可能需要用如下jQ代码来实现:

代码如下:

$(‘.one’).delay(500).animate({top:’+=270px’},500,function(){

$(‘.two’).delay(500).animate({top:’+=270px’},500,function(){

$(‘.three’).delay(500).animate({top:’+=270px’},500,function(){

$(‘.four’).delay(500).animate({top:’+=270px’},500,function(){

$(‘.five’).delay(500).animate({top:’+=270px’},500,function(){

$(‘.six’).delay(500).animate({top:’+=270px’},500,function(){

$(‘.seven’).animate({top:’+=270px’},500,function(){

alert(‘按序落体运动结束! Yeah!’)

});

});

});

});

});

});

});

嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 或者新加8至15八个方块, 怎么办? 重写吗? 在里面小心冀冀的改吗? 显然, 我们需要另外一种列简明便捷的方法来实现这个效果, 那就是jQuery队列控制方法.请看如下代码:

代码如下:

var _slideFun=[

function(){$(‘.one’).delay(500).animate({top:’+=270px’},500,_takeOne);},

function(){$(‘.two’).delay(300).animate({top:’+=270px’},500,_takeOne);},

function(){$(‘.three’).delay(300).animate({top:’+=270px’},500,_takeOne);},

function(){$(‘.four’).delay(300).animate({top:’+=270px’},500,_takeOne);},

function(){$(‘.five’).delay(300).animate({top:’+=270px’},500,_takeOne);},

function(){$(‘.six’).delay(300).animate({top:’+=270px’},500,_takeOne);},

function(){$(‘.seven’).delay(300).animate({top:’+=270px’},500,function(){

alert(‘按序落体运动结束! Yeah!’);

});}

];

$(‘#demo’).queue(‘slideList’,_slideFun);

var _takeOne=function(){

$(‘#demo’).dequeue(‘slideList’);

};

_takeOne();

这样一来, 看起来是不是简明多了. 如何实现?
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
DEMO演示中也有详解的注释, 如果上面的说明还看不明白,请看源码.
至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).

 

————————————————————————————-

转自:http://blog.csdn.net/prettywhitewolf_xiao/article/details/7660198

queue和dequeue的过程主要是:
1,用queue把函数加入队列(通常是函数数组)
2,用dequeue将函数数组中的第一个函数取出,并执行(用shift()方法取出并执行)

也就意味着当再次执行dequeue的时候,得到的是另一个函数了
同时也意味着,如果不执行dequeue,那么队列中的下一个函数永远不会执行

对于一个元素上执行animate方法加动画,jQuery内部也会将其加入名为 fx 的函数队列
而对于多个元素要依次执行动画,则必须我们手动设置队列进行了。

一个例子,要两个div依次向左移动,点击这里查看

div {

  •     background:#aaa;
  •     width:18px;
  •     height:18px;
  •     position:absolute;
  •     top:10px;
  • }

<div id=block1></div>

  • <div id=block2></div>

如果只是轮流移动次数较少,可以使用animate的回调函数来做,一个动画放在另一个动画的回调里边
比如

$(#block1).animate({left:+=100},function() {

  •     $(#block2).animate({left:+=100},function() {
  •         $(#block1).animate({left:+=100},function() {
  •             $(#block2).animate({left:+=100},function() {
  •                 $(#block1).animate({left:+=100},function(){
  •                     alert(动画结束);
  •                 });
  •             });
  •         });
  •     });
  • });

但这种方法当动画较多的时候简直是残忍。

此时利用queue和dequeue则显得简单很多:

var FUNC=[

  •     function() {$(#block1).animate({left:+=100},aniCB);},
  •     function() {$(#block2).animate({left:+=100},aniCB);},
  •     function() {$(#block1).animate({left:+=100},aniCB);},
  •     function() {$(#block2).animate({left:+=100},aniCB);},
  •     function() {$(#block1).animate({left:+=100},aniCB);},
  •     function(){alert(动画结束)}
  • ];
  • var aniCB=function() {
  •     $(document).dequeue(myAnimation);
  • }
  • $(document).queue(myAnimation,FUNC);
  • aniCB();

1,我首先建议建立了一个函数数组,里边是一些列需要依次执行的动画
2,然后我定义了一个回调函数,用dequeue方法用来执行队列中的下一个函数
3,接着把这个函数数组放到document上的myAnimation的队列中(可以选择任何元素,我只是为了方便而把这个队列放在document上)
4,最后我开始执行队列中的第一个函数

这样做的好处在于函数数组是线性展开,增减起来非常方便。
而且,当不要要继续进行接下来动画的时候(比如用户点了某个按钮),只需要清空那个队列即可。而要增加更多则只需要加入队列即可

//清空队列

  • $(document).queue(myAnimation,[]);
  • //加一个新的函数放在最后
  • $(document).queue(myAnimation,function(){alert(动画真的结束了!)});

以前发过一个wait插件,用于让动画之间可以暂停一段时间
http://shawphy.com/2008/07/enabling-settimout-within-chained-functions-in-jquery.html
可以看一下,他也就是利用了这个原理,默认在fx中插入一个timeout,放到队列中,直到timeout结束后才执行dequeue继续执行队列中的下一个函数。

这当然也可以用于ajax之类的方法,如果需要一系列ajax交互,每个ajax都希望在前一个结束之后开始,之前最原始的方法就是用回调函数,但这样太麻烦了。同样利用queue添加队列,每次ajax之后的回调中执行一次dequeue即可

 

    原文作者:江湖丶丿新进程
    原文地址: https://www.cnblogs.com/chjb/articles/4661298.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注