jquery使用（二）：queue和dequeue

1.使用场景：

用于一系列按次序运行的函数（动画、ajax、timeout等需要一定时间的函数）

2.浅层次理解

2.1 queue把函数加入队列（通常是函数数组）
2.2 dequeue将函数数组中的第一个函数取出，并执行，相当于shift（）方法取出并执行

3.注意点：

3.1 不断执行dequeue的时候，得到的函数不一样
3.2 不执行dequeue，队列的下一个函数永远执行不了

4.实例说明

4.1 动画中，当回调比较少的时候

$(“#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(“动画结束”);
                });
            });
        });
    });
});

4.2 当回调比较多的时候

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(“动画真的结束了！”)});

5.拓展：jQuery的链式动画写法中加入setTimeout

// 一个简单的封装，用于在两次animate之间，加入一定的时间间隔的等待。
 demo$.fn.wait = function(time, type) {
     time = time || 1000;type = type || “fx”;
     return this.queue(type, function() {
         var self = this;setTimeout(function() {
               $(self).dequeue();
          }, time);
    });
 };

具体用法是，.wait( [time], [type] )第一个参数是时间，默认是1000毫秒。第二个参数是类型，默认是fx即动画效果function runIt() {$(“div”).wait().animate({left:’+=200′},2000).wait().animate({left:’-=200′},1500,runIt);}runIt();