jQuery中queue和dequeue

最新推荐文章于 2019-01-23 18:11:58 发布

hcy48

最新推荐文章于 2019-01-23 18:11:58 发布

阅读量656

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/hcy48/article/details/72651504

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用queue把函数加入队列（通常是函数数组）
用dequeue将函数数组中的第一个函数取出，并执行(用shift()方法取出并执行）
_____________________________________________________________________________________________________________________

queue方法最常用于animate动画，ajax，以及timeout等。
当我们需要依次执行某些函数时，最常用的是回调。但回调多了后会造成逻辑上的阅读困难，如下

$("#block1").animate(...,function() {
    $("#block2").animate(...,function() {
        $("#block1").animate(...,function() {
            $("#block2").animate(...,function() {
                $("#block1").animate(...,function(){
                    ...
                });
            });
        });
    });
});

但使用queue则能看的更清楚,使用方法是：
1. 新建一个数组,把动画函数依次放进去;
2. 用queue将这组动画函数数组加入到队列中;
3. 用dequeue取出队列中第一个函数, 并执行它;
4. 初始执行第一个函数.

var FUNC=[
    function() {$("#block1").animate(...,aniCB);},
    function() {$("#block2").animate(...,aniCB);},
    function() {$("#block1").animate(...,aniCB);},
    function() {$("#block2").animate(...,aniCB);},
    function() {$("#block1").animate(...,aniCB);},
    function(){alert("动画结束")}
];
var aniCB=function() {
    $(document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC);
aniCB();