jQuery队列控制方法详解queue()/dequeue()/clearQueue()

jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.
先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO

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队列控制方法.请看如下代码:

这样一来, 看起来是不是简明多了. 如何实现?
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
DEMO演示中也有详解的注释, 如果上面的说明还看不明白,请看源码.
至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).

原文发布于Mr.Think的博客 : http://mrthink.net/jqueryapi-queue-dequeue/ 转载请注明

转载于:https://www.cnblogs.com/mrthink/archive/2010/12/02/1894143.html

jQuery队列控制方法详解queue()/dequeue()/clearQueue()相关推荐

ucos 消息队列代码详解_用python实现多进程队的列数据处理详解，零基础记得都收藏哦
今天就为大家分享一篇python 多进程队列数据处理详解,具有很好的参考价值,希望对大家有所帮助.喜欢的话记得点赞转发关注不迷路哦!!! 总之了写到多进程队列数据处理问题,也就不多废话了,直接来上代码 ...
python多进程队列中的队列_python 多进程队列数据处理详解
我就废话不多说了,直接上代码吧! # -*- coding:utf8 -*- import paho.mqtt.client as mqtt from multiprocessing import P ...
BlockingQueue（阻塞队列）详解
推荐:Java并发编程汇总 BlockingQueue(阻塞队列)详解原文地址 BlockingQueue 一. 前言在新增的Concurrent包中,BlockingQueue很好的解决了多线程 ...
消息队列超详解（以RabbitMQ和Kafka为例，为何使用消息队列、优缺点、高可用性、问题解决）
消息队列超详解(以RabbitMQ和Kafka为例) 为什么要用消息队列这个东西? 先说一下消息队列的常见使用场景吧,其实场景有很多,但是比较核心的有3个:解耦.异步.削峰. 解耦:现场画个图来说明一 ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...
[zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
python 消息队列 get是从队首还是队尾取东西_python分布式爬虫中消息队列知识点详解...
当排队等待人数过多的时候,我们需要设置一个等待区防止秩序混乱,同时再有新来的想要排队也可以呆在这个地方.那么在python分布式爬虫中,消息队列就相当于这样的一个区域,爬虫要进入这个区域找寻自己想要的 ...
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...
php mysql 任务队列_PHP+MySQL实现消息队列步骤详解
这次给大家带来PHP+MySQL实现消息队列步骤详解,PHP+MySQL实现消息队列的注意事项有哪些,下面就是实战案例,一起来看一下. 最近遇到一个批量发送短信的需求,短信接口是第三方提供的.刚开始想 ...

jQuery队列控制方法详解queue()/dequeue()/clearQueue()

jQuery队列控制方法详解queue()/dequeue()/clearQueue()相关推荐

最新文章

热门文章