您的位置：首页 > Web前端 > JQuery

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

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

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

queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.

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

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

现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO



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

01
$(
'.one'
).delay(500).animate({top:
'+=270px'
},500,
function
(){
02
$(
'.two'
).delay(500).animate({top:
'+=270px'
},500,
function
(){
03
$(
'.three'
).delay(500).animate({top:
'+=270px'
},500,
function
(){
04
$(
'.four'
).delay(500).animate({top:
'+=270px'
},500,
function
(){
05
$(
'.five'
).delay(500).animate({top:
'+=270px'
},500,
function
(){
06
$(
'.six'
).delay(500).animate({top:
'+=270px'
},500,
function
(){
07
$(
'.seven'
).animate({top:
'+=270px'
},500,
function
(){
08
alert(
'按序落体运动结束!
Yeah!'
)
09
});
10
});
11
});
12
});
13
});
14
});
15
});
嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 或者新加8至15八个方块, 怎么办? 重写吗? 在里面小心冀冀的改吗? 显然, 我们需要另外一种列简明便捷的方法来实现这个效果, 那就是jQuery队列控制方法.请看如下代码:

01
var
 
_slideFun=[
02
function
(){$(
'.one'
).delay(500).animate({top:
'+=270px'
},500,_takeOne);},
03
function
(){$(
'.two'
).delay(300).animate({top:
'+=270px'
},500,_takeOne);},
04
function
(){$(
'.three'
).delay(300).animate({top:
'+=270px'
},500,_takeOne);},
05
function
(){$(
'.four'
).delay(300).animate({top:
'+=270px'
},500,_takeOne);},
06
function
(){$(
'.five'
).delay(300).animate({top:
'+=270px'
},500,_takeOne);},
07
function
(){$(
'.six'
).delay(300).animate({top:
'+=270px'
},500,_takeOne);},
08
function
(){$(
'.seven'
).delay(300).animate({top:
'+=270px'
},500,
function
(){
09
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. 初始执行第一个函数.

DEMO演示中也有详解的注释, 如果上面的说明还看不明白,请看源码.

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


可自由转载及使用,但请注明出处!

转载自 <a href="http://mrthink.net/jqueryapi-queue-dequeue/" title="jQuery队列控制方法详解queue()/dequeue()/clearQueue()" rel="bookmark">jQuery队列控制方法详解queue()/dequeue()/clearQueue()@Mr.Think</a>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                jquery
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航