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 相关文章推荐
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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数组交集的优化代码分析
2011/03/06 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php反射应用示例
2014/02/25 PHP
php中return的用法实例分析
2015/02/28 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
jQuery随机切换图片的小例子
2013/04/18 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
Java面试笔试题大全
2016/11/23 面试题
上课睡觉检讨书
2014/01/28 职场文书
思想品德课教学反思
2014/02/10 职场文书
科级干部考察材料
2014/02/15 职场文书
职业女性的职业规划
2014/03/04 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
通知的写法
2015/04/23 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB