java的dequeue_$.queue() 与 $.dequeue() -- 队列

JQuery 运用队列为动画模块服务，但好像它应该有更多用处，我觉得的，那试试就知道咯。

简单的来讲，它就是形成队列和出列，

也就因此可以进行很有规律的回调和延时了呀(暂停感觉有难度)，当然这就是后面的事了，先来看看队列怎么玩吧。

function fn1() {console.log(1)}

function fn2() {console.log(2)}

function fn3() {console.log(3)}

var elem = $('div')[0];

$.queue(elem, 'xxxx', fn1);

$.queue(elem, 'xxxx', fn2);

$.queue(elem, 'xxxx', fn3);

// 每2秒调用一次$.dequeue，依次输出1,2,3

var Timer = setInterval(function() {

if($.queue(elem, 'xxxx').length > 0) {

$.dequeue(elem, 'xxxx')

} else {

clearTimeout(Timer);

}

}, 500);

可以看出，$.queue() 既是 setter 也是 getter(返回的是个数组)

另外值得一提的是，fn1 的参数问题，有点小奇怪，看一看就知道了

而至于 hooks，是 $.callback() 的一个小案例，也是个很好用的工具，以后会再开一章来进行分析学习。

// next(); 就能直接运行队列的下一个咯

function fn1(next, hooks) {console.log(1); next();}

function fn2(next, hooks) {console.log(2); next();}

function fn3(next, hooks) {console.log(3); next();}

var elem = $('div')[0];

$.queue(elem, 'xxxx', [fn1, fn2, fn3]);

$.dequeue(elem, 'xxxx');

$.queue() 也可以弄出 $.fn.queue() 这是很容易理解的，$.queue(elem, name, fnArr) 就等于 $(elem).queue(name, fnArr) 咯。

JQuery 动画队列的 name 是 “fx”，那我们是不是也可以来模拟一个类似的队列呢，比如插件 jquery.transit 的应用，原理如下(真TM拙劣 (ಥ_ಥ) )。

function fadeIn(next) {$(this).addClass('fadeIn').on('transitionend', next);}

function scale(next) {$(this).addClass('scale').on('transitionend', next);}

$('div').queue('transit', [fadeIn, scale]);

$('div').dequeue('transit');

同理，我们还能做出更多有点队列的栗子，回调地狱虽然可怕，但也可以写得很美的说(Promise 神马还没开始研究)

load('url', 'url');

function load() {

for(var a in arguments) {

$('div').queue('load', function(next){

_load(url, next);

});

}

function _load(url, next) {

$.post(url, function(){next();});

}

}

接着是 $.fn.delay(duration, queueName)，很容易理解吧(不过好像试了下只能在加入队列时添加延时，而不能在队列函数内部书写)

同理，$.fn.delay(queueName, ifClearQueue, ifJumpToEnd) 也很方便理解(虽然确实可以暂停，但延时并未计算在内，也不像动画那种中途暂停，还有待研究)

(注意：上面两者是 $.fn 而不是 $. 哟，当不输入参数 queueName 时，默认是 'fx' 即动画队列。)

function fn1(next) {console.log(1);next();}

function fn2(next) {console.log(2);next();}

function fn3(next) {console.log(3);next();}

var elem = $('div')[0];

$.queue(elem, 'xxxx', fn1);

$(elem).delay(1000,'xxxx');

$.queue(elem, 'xxxx', fn2);

$(elem).delay(1000, 'xxxx');

$.queue(elem, 'xxxx', fn3);

$.dequeue(elem, 'xxxx');

setTimeout(function(){

$(elem).stop(true, true);

}, 1500);

就酱紫，队列真的是个很棒的概念，但队列的操作还不够完善，咱们拭目以待