jQuery队列控制方法详解

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

先解释一下这组方法各自的含义：

queue(name,[callback])：当只传入一个参数时，它返回并指向第一个匹配元素的队列（将是一个函数数组，队列名默认是fx）； 当有两个参数传入时，第一个参数还是默认为fx的的队列名，第二个参数又分两种情况，当第二个参数是一个函数时，它将在匹配的元素的队列最后添加一个函数；当第二个参数是一个函数数组时，它将匹配元素的队列用新的一个队列来代替（函数数组）。

dequeue(name):这个好理解，就是从队列最前端移除一个队列函数，并执行它。

clearQueue([queueName])：清空对象上尚未执行的所有队列。参数可选，默认为fx。但个人觉得这个方法没多大用，用queue()方法传入两个参数的第二种参数即可实现clearQueue方法。

现在，我们要实现这样一个效果，有标有1至7的数字方块，要求这七个方块自左到右依次下落。

CSS与HTML部分我就不贴出来了。若按常规做法，可能需要用如下jQuery代码来实现：

1. $(‘.one’).delay(500).animate({top:’+=270px’},500,function(){
2.   $(‘.two’).delay(500).animate({top:’+=270px’},500,function(){
3.     $(‘.three’).delay(500).animate({top:’+=270px’},500,function(){
4.       $(‘.four’).delay(500).animate({top:’+=270px’},500,function(){
5.         $(‘.five’).delay(500).animate({top:’+=270px’},500,function(){
6.           $(‘.six’).delay(500).animate({top:’+=270px’},500,function(){
7.             $(‘.seven’).animate({top:’+=270px’},500,function(){
8.               alert(‘按序落体运动结束! Yeah!’)
9.             });
10.           });
11.         });
12.       });
13.     });
14.   });
15. });

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

1. var _slideFun=[

2. function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
3. function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
4. function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
5. function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
6. function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
7. function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);},
8. function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
9.     alert('按序落体运动结束! Yeah!');
10.   });}
11. ];
12. $('#demo').queue('slideList',_slideFun);
13. var _takeOne=function(){
14.     $('#demo').dequeue('slideList');
15. };
16. _takeOne();

这样一来，看起来是不是简明多了。那么它是如何实现的？

1、新建一个数组，把动画函数依次放进去（这样更改顺序，新加动画是不是方便多了？）；

2、用queue将这组动画函数数组加入到slideList队列中；

3、用dequeue取出slideList队列中第一个函数，并执行它；

4、初始执行第一个函数。

至于clearQueue()方法，就不多说了，演示中停止按钮调用的就是clearQueue()方法，当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现（个人比较推荐空数组替换，更直观）。