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();