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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
解析vue中的$mount
Dec 21 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解JS ES6编码规范
May 07 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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python实现图像的垂直投影示例
2020/01/17 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
python利用线程实现多任务
2020/09/18 Python
Python 内存管理机制全面分析
2021/01/16 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
过滤器的用法
2013/10/08 面试题
小区门卫岗位职责
2013/12/31 职场文书
体操比赛口号
2014/06/10 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
自查自纠整改报告
2014/11/06 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书