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判断图片尺寸和格式兼容IE
Sep 01 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
vue树形结构获取键值的方法示例
Jun 21 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
解决elementui表格操作列自适应列宽
Dec 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
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
JS location几个方法小姐
2008/07/09 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python进阶篇之字典操作总结
2016/11/16 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
python滑块验证码的破解实现
2019/11/10 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
教育系毕业生中文求职信范文
2013/10/06 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
爱情保证书范文
2014/02/01 职场文书
国旗下的演讲稿
2014/05/08 职场文书
民政局个人整改措施
2014/09/24 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年端午节活动总结
2015/02/11 职场文书
工程款申请报告
2015/05/15 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python