jQuery 源码分析笔记(7)

###Queue

[queue](http://api.jquery.com/queue)是用来维护函数队列的。比较常用的是queue(queueName, callback);其中queueName缺省是fn，即标准函数队列。 每个Element可以拥有多个队列，但是基本上都只使用到一个，即默认的fn队列。队列允许一系列函数被异步地调用而不会阻塞程序。 例如：$("#foo").slideUp().fadeIn();其实这个就是我们大家常用的链式调用，实际上这是一个Queue。所以队列和Deferred地位类似， 是一个内部使用的基础设施。当slideUp运行时，fadeIn被放到fx队列中，当slideUp完成后，从队列中被取出运行。queue函数允许 直接操作这个链式调用的行为。同时，queue可以指定队列名称获得其他能力，而不局限于fx队列。

// 一般用法：
$("#foo").slideUp(function() {
    alert("Animation complete.");
});
// 相当于：
$("#foo").slideUp();  // 不提供回调，只是触发事件
$("#foo").queue(function() {  // 把回调函数加入
    alert("Animation complete."); 
    $(this).dequeue();  // 必须从队列中取出，那么队列中的下一个函数就有机会被调用
});

queue内部使用data或者JavaScript数组API来保存数据。其中操作数组的push和shift天生就是一组队列API。而data可以用来保存任意数据。

queue: function(elem, type, data) {
    if(elem) {
        // 默认是fn
        type = (type || "fx") + "queue";
        // data内部API：data(element, key, value, pvt);
        // 这里不传入data，是为了效率的考虑。如果没传入data，则只是get队列，那么就不需要以下的判断了
        var q = jQuery.data(elem, type, undefined, true);
        if(data) {
            if(!q || jQuery.isArray(data)) {
                q = jQuery.data(elem, type, jQuery.makeArray(data), true);
            } else {
                q.push(data);  // 压入
            }
        }
        return q || [];
    }
}

dequeue: function(elem, type) {
    type = type || "fx";
    // 得到这个队列
    var queue = jQuery.queue(elem, type),
    // 出列一个元素
    fn = queue.shift(),
    defer;

    // "inprogress"岗哨
    if(fn === "inprogress") {
        fn = queue.shift();
    }

    if(fn) {
        // 加一个岗哨，防止自动出列
        if(type === "fx") {
            queue.unshift("inprogress");
        }

        // 执行
        fn.call(elem, function() {
            jQuery.dequeue(elem, type);
        });
    }
    if(!queue.length) {
        jQuery.removeData(elem, type + "queue", true);
        handleQueueMarkDefer(elem, type, "queue");
    }
}