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则显得简单很多：

var FUNC=[

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

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

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

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

];

var aniCB=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一样的效果。则上面的例子可以改写为：

var FUNC=[

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

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

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

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

];

var aniCB=function() {

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

}

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

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

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

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

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

//清空队列

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

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

Jquery中的队列函数quene()、dequene()、clearQuene()相关推荐

jQuery中的队列是什么？
我发现queue() / dequeue()上的jQuery.com文档太简单了. jQuery中的队列到底是什么? 我应该如何使用它们? #1楼它允许您将动画排队...例如,代替此 $('#my- ...
工厂好的html页面,jquery中被誉为工厂函数的是什么？
jquery中被誉为工厂函数的是"$()".在jQuery中,无论我们使用哪种类型的选择符都需要从一个"$"符号和一对"()"开始.下面本篇 ...
jquery中serialize()序列化函数
全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中serialize()序列化函数 serialize()序列化,将元素转化为xx=xx&xx=xx&am ...
jQuery中常用的函数方法总结
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在www.21kaiyun.com的紫微斗数星座在线排盘开发中会比较常用的,仅供大家学习和参考. 事件处理 re ...
jquery中的ready函数与window.onload谁先执行
关于$(document).ready(): jquery中的$(document).ready(),那$(document).ready()到底是什么作用呢?是不是可以用window.onload ...
jquery中使用eval()函数
jquery eval解析JSON中的注意点介绍转载于:https://blog.csdn.net/sinat_27535209/article/details/78457213 在JS中将JSON ...
如何在html中选择wrap,使用jQuery中的wrap()函数操作HTML元素的教程
wrap()函数用于在每个匹配元素外部包裹指定的HTML结构. 与该函数相对的是unwrap()函数,用于当前匹配元素的父元素(只移除父元素,其内部节点全部保留). 该函数属于jQuery对象(实例) ...
JQuery中一些常用函数的运用
一.JQuery的效果介绍二.定时弹出广告图片JQ部分代码 <script type="text/javascript">var time;$(function(){ ...
jquery中的css函数css(name)、css(key,value)、css(properties)、css(key,fn)
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery通过css函数操作元素样式 jquery的css函数,包括css(name).css(key,value ...

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

Jquery中的队列函数quene()、dequene()、clearQuene()相关推荐

最新文章

热门文章