jQuery队列操作方法实例


Posted in Javascript onJune 11, 2014

jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.

先解释一下这组方法各自的含义.

queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕.

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

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. 初始执行第一个函数.

至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).

Javascript 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
JS生成不重复随机数组的函数代码
Jun 10 #Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 #Javascript
JS生成随机字符串的多种方法
Jun 10 #Javascript
json中换行符的处理方法示例介绍
Jun 10 #Javascript
Jquery焦点与失去焦点示例应用
Jun 10 #Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 #Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 #Javascript
You might like
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python实现图片处理和特征提取详解
2017/11/13 Python
python实现简易版计算器
2020/06/22 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
数学检讨书1000字
2014/02/24 职场文书
保健品市场营销方案
2014/03/31 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
期中考试复习计划
2015/01/19 职场文书