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 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
jQuery实现大图轮播
Feb 13 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
Php+SqlServer实现分页显示
2006/10/09 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
微信API接口大全
2015/04/15 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
神龙架导游词
2015/02/11 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
小学中队长竞选稿
2015/11/20 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript