Jquery中的队列函数quene()、dequene()、clearQuene()

jQuery中的queue和dequeue是一组很有用的方法，他们对于一系列需要按次序运行的函数特别有用。特别animate动画，ajax，以及timeout等需要一定时间的函数。Queue（）和dequeue()方法是都既具有工具方法，又具有实例方法，但是clearQueue()只是实例方法只能在jquery对象上进行使用

在调用quene之前如果有调用动画函数，将已经从产生了默认的队列fx，quene的操作是在这个的基础上的。

queue和dequeue的过程主要是：
1，用queue把函数加入队列（通常是函数数组）
2，用dequeue将函数数组中的第一个函数取出，并执行(用shift()方法取出并执行）

queue(name,[callback]):当只传入一个参数时,如果参数是队列名，它返回并指向第一个匹配元素的队列(将是一个函数数组)，当参数是函数时，将会该函数加到默认队列fx中; 当有两个参数传入时, 第一个参数是队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).quene既可以进行读操作又可以进行写操作。（注意在工具方法中该方法具有三个参数，多一个传入的元素对象，下面的dequeue 同理）
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.也就意味着当再次执行dequeue的时候，得到的是另一个函数了同时也意味着，如果不执行dequeue，那么队列中的下一个函数永远不会执行
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.

对于一个元素上执行animate方法加动画，jQuery内部也会将其加入名为 fx 的函数队列
而对于多个元素要依次执行动画，则必须我们手动设置队列进行了。

1、一个例子，要两个div依次向左移动

div{

background:#aaa;

width:18px;

height:18px;

position:absolute;

top:10px;

}

如果只是轮流移动次数较少，可以使用animate的回调函数来做，一个动画放在另一个动画的回调里边,比如

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

以上的这种方式的效果就相当于动画的链式操作：

$(function(){

$("#block").click(function(){

$(this).animate({left:200},200).animate({width:200},200).animate({height:200},200);

});

})其中animate中的第二个参数指定动画的执行时间
但这两种方法当动画较多的时候如果要调换动画函数的执行顺序或者是新添加动画函数将会改动比较大。此时利用queue和dequeue则显得简单很多：

varFUNC=[

function(){$("#block1").animate({left:"+=100"},aniCB);},

function(){$("#block2").animate({height:"+=100"},aniCB);},

function(){$("#block1").animate({width:"+=100"},aniCB);},

function(){alert("动画结束")}

];

varaniCB=function(){

$(document).dequeue(“myAnimation”);

}

$(document).queue(“myAnimation”,FUNC);

aniCB();

2、Var n=$(document).quene(“myAinmation”),将返回一个函数数组。

3、$(document).quene(“fx”,”FUNC”),原队列将会被FUNC数组函数代替。

4、$(document).queue(“myAnimation”,function(){alert(“动画真的结束了！”)});//加一个新的函数放在最后

1，首先建议建立了一个函数数组，里边是一些列需要依次执行的动画
2，然后定义一个函数，用dequeue方法用来执行队列中的下一个函数，在这其中dequeue()方法有一个替换的方法：

$(this).queue('fx',function(){

$(this).dequeue();

}).

$(this).queue('fx',function(next){

next();

}).

给队里添加的方法中传递一个参数next，调用方法next（）就可以达到和dequeue一样的效果。则上面的例子可以改写为：

varFUNC=[

function(next){$("#block1").animate({left:"+=100"},next);},

function(next){$("#block2").animate({height:"+=100"},next);},

function(next){$("#block1").animate(width:"+=100"},next);},

function(){alert("动画结束")}

];

varaniCB=function(){

$(document).dequeue(“myAnimation”);

}

$(document).queue(“myAnimation”,FUNC);

aniCB();//也需要提前触发一次

*两种方式都要注意不要再动画的第二个参数传函数时加上()，这样动画的执行效果会是反着的。
3，接着把这个函数数组放到document上的myAnimation的队列中（可以选择任何元素，我只是为了方便而把这个队列放在document上）
4，最后我开始执行队列中的第一个函数

5，最为重要的是一定记得在每个动画的回调函数中一定要继续调用dequene，否则下面的动画将无法执行。

这样做的好处在于函数数组是线性展开，增减起来非常方便。而且，当不要要继续进行接下来动画的时候(比如用户点了某个按钮)，只需要清空那个队列即可。而要增加更多则只需要加入队列即可。

//清空队列

$(document).queue(“myAnimation”,[]);第一种方式如上所示直接给要清空的队列赋一个空数组，另外一种方式是$(document).clearQueue()

6、通过入队出队操作，可以控制异步执行的顺序以及执行的场合时机，只要不出队就不会执行下一个操作。

更多相关文章

随机推荐