$.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);

　　

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