jQuery队列控制方法详解queue()/dequeue()/clearQueue()


Posted in Javascript onDecember 02, 2010

先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.

dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO

jQuery队列控制方法详解queue()/dequeue()/clearQueue()

css与html部分我就不贴出来了,DEMO演示中有. 若按常规做法, 可能需要用如下jQ代码来实现:

$('.one').delay(500).animate({top:'+=270px'},500,function(){
		$('.two').delay(500).animate({top:'+=270px'},500,function(){
			$('.three').delay(500).animate({top:'+=270px'},500,function(){
				$('.four').delay(500).animate({top:'+=270px'},500,function(){
					$('.five').delay(500).animate({top:'+=270px'},500,function(){
						$('.six').delay(500).animate({top:'+=270px'},500,function(){
							$('.seven').animate({top:'+=270px'},500,function(){
								alert('按序落体运动结束! Yeah!')
							});
						});
					});
				});
			});
		});
	});

嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 或者新加8至15八个方块, 怎么办? 重写吗? 在里面小心冀冀的改吗? 显然, 我们需要另外一种列简明便捷的方法来实现这个效果, 那就是jQuery队列控制方法.请看如下代码:

var _slideFun=[
	function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
		alert('按序落体运动结束! Yeah!');
	});}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
	$('#demo').dequeue('slideList');
};
_takeOne();

这样一来, 看起来是不是简明多了. 如何实现?
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
DEMO演示中也有详解的注释, 如果上面的说明还看不明白,请看源码.
至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).

Javascript 相关文章推荐
js 去除字符串第一位逗号的方法
Jun 07 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
canvas 实现中国象棋
Feb 17 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
JQuery 弹出框定位实现方法
Dec 02 #Javascript
Jquery replace 字符替换实现代码
Dec 02 #Javascript
jquery json 实例代码
Dec 02 #Javascript
JavaScript格式化数字的函数代码
Nov 30 #Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 #Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 #Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 #Javascript
You might like
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP教程 预定义变量
2009/10/23 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
js 小数取整的函数
2010/05/10 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python Tensor和Array对比分析
2020/01/08 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python 画条形图(柱状图)实例
2020/04/24 Python
python 如何调用远程接口
2020/09/11 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
文书工作总结(范文)
2019/07/11 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS