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 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
在vue项目中使用sass语法问题
Jul 18 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 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命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jquery实现拖动效果
2016/08/10 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Python中for循环详解
2014/01/17 Python
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
详解python单元测试框架unittest
2018/07/02 Python
Python计算信息熵实例
2020/06/18 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python3排序的实例方法
2020/10/20 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
红旗团支部事迹材料
2014/01/27 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
岗位廉政承诺书
2014/03/27 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2015年防汛工作总结
2015/05/15 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书