jQuery队列控制⽅法详解
queue（）dequeue（）clearQueue（）
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代码来实现
:
1          2          3          4          5          6          7          8          9          10          11          12          13          14          15$(
'.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'
jquery源码在线},500,
function
(){
嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想
调换⼀个某个的执⾏顺序, ⽐如, 你想让5落下后再开始下落3, 或者新加8⾄15⼋个⽅块, 怎么办? 重写吗? 在⾥⾯⼩⼼冀冀的改吗? 显然, 我们需要另外⼀种列简明便捷的⽅法来实现这个效果, 那就是jQuery队列控制⽅法.请看如下代码:
1          2          3          4          5          6var
_slideFun=[
function
(){$(
'.one'
).delay(500).animate({top: '+=270px'
},500,_takeOne);}, function
7          8          9          10          11          12          13          14          15          16function
(){$(
'.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'
这样⼀来, 看起来是不是简明多了. 如何实现?
1. 新建⼀个数组，把动画函数依次放进去(这样更改顺序，新加动画是不是⽅便多了?);
2. ⽤queue将这组动画函数数组加⼊到slideList队列中;
3. ⽤dequeue取出slideList队列中第⼀个函数, 并执⾏它;
4. 初始执⾏第⼀个函数.
DEMO演⽰中也有详解的注释, 如果上⾯的说明还看不明⽩，请看源码.
⾄于clearQueue()⽅法，就不多说了, 演⽰中停⽌按钮调⽤的就是clearQueue()⽅法，当然你还可以⽤queue()⽅法直接将现在的函数列队替换成[]空数组实现(个⼈⽐较推荐空数组替换.，更直
观).

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。