jQuery 源码分析笔记(7) Queue


Posted in Javascript onJune 19, 2011

每个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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 #Javascript
jQuery调用WebService的实现代码
Jun 19 #Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 #Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 #Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 #Javascript
用Juery网页选项卡实现代码
Jun 13 #Javascript
读jQuery之三(构建选择器)
Jun 11 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
php和nginx交互实例讲解
2019/09/24 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
对python模块中多个类的用法详解
2019/01/10 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python修改字典键(key)的方法
2019/08/05 Python
wxpython绘制音频效果
2019/11/18 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
高中的职业生涯规划书
2013/12/28 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
小组组名及励志口号
2015/12/24 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
vue 实现上传组件
2021/05/31 Vue.js
python脚本框架webpy的url映射详解
2021/11/20 Python