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 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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实现文件下载更能介绍
2012/11/23 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python实现名片管理系统项目
2019/04/26 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
如何验证python安装成功
2020/07/06 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
2015年幼儿园毕业感言
2014/02/12 职场文书
社区母亲节活动记录
2014/03/06 职场文书
学校社会实践活动总结
2014/07/03 职场文书
土地转让协议书
2014/09/27 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年统战工作总结
2015/05/19 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Python实现归一化算法详情
2022/03/18 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技