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 相关文章推荐
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
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
php+mysql写的简单留言本实例代码
2008/07/25 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
js玩一玩WSH吧
2007/02/23 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python多线程与多进程及其区别详解
2019/08/08 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
项目申请汇报材料
2014/08/16 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
Django模型层实现多表关系创建和多表操作
2021/07/21 Python