jQuery 源码分析笔记(7) Queue_Javascript教程-查字典教程网
jQuery 源码分析笔记(7) Queue
jQuery 源码分析笔记(7) Queue
发布时间:2016-12-30 来源:查字典编辑
摘要:每个Element可以拥有多个队列,但是基本上都只使用到一个,即默认的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");

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类