jQuery中的队列
2017-03-01 本文已影响8人
ferrint
关键词:队列
语法:
工具方法: $.queue(newQueue, queueName, callback);
函数执行: $('#box').queue(queueName, callback)
jquery队列是统一管理函数得执行顺序的,把函数放进一个有名称的队列中,在出队的时候执行。
function fn1() {
console.dir("f1")
}
function fn2() {
console.dir("f2")
}
function fn3() {
console.dir("f3")
}
// 入队 把函数添加到队列
$.queue(document,'myque',fn1);
$.queue(document,'myque',fn2);
$.queue(document,'myque',fn3);
// 出队 执行函数
$.dequeue(document,'myque',fn1); //f1
$.dequeue(document,'myque',fn2); //f2
$.dequeue(document,'myque',fn3); //f3
当让你也可以写成这样的形式:
* $(document).dequeue('myque',fn1);
值得注意的是,队列会异步执行,只有当前动作执行完了才可以执行下一个动作,(就像银行取款机,同一时间里面只能有一个人,只有当里面的人取完钱走了,下一个才可以进入,取钱,走人完成一整套动作之后下一个再重复)
比如出队时我们这样调用:
* $.dequeue(document,'myque',fn3); //f1,f2
执行的是f1,f2出队,如果我们想要f3出队,就要这样做:
$.dequeue(document,'myque',fn3);
$.dequeue(document,'myque',fn3);
$.dequeue(document,'myque',fn3);
好了,队列概念我们就讲完了,这看起来并没有什么乱用,当时在jQuery却无处不在,比如
* $('#foo').slideUp().fadeIn();
只有在slideUp()执行完了之后才能执行fadeIn;
我们还可以用队列做异步动画:
$('#box').animate({width:200},1000);
$('#box').animate({height:200},1000);
$('#box').animate({left:200},1000);
jQuery中延迟的方法也是通过队列实现的:
$('#box').animate({width:200},1000);
$('box').delay(2000);
$('#box').animate({height:200},1000);
$('#box').animate({left:200},1000);