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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
简述ES6新增关键字let与var的区别
Aug 23 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
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP目录操作实例总结
2016/09/27 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
JavaScript适配器模式详解
2017/10/19 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
Python字符串替换实例分析
2015/05/11 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python shelve模块实现解析
2019/08/28 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
个人安全生产承诺书
2014/05/22 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Python四款GUI图形界面库介绍
2022/06/05 Python