您好,欢迎访问一九零五行业门户网

jQuery 源码分析笔记(7) Queue_jquery

每个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);
}
}
其它类似信息

推荐信息