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 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
js遍历td tr等html元素
Dec 13 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 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
PHP操作文件方法问答
2007/03/16 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP常用技巧汇总
2016/03/04 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
用python代码做configure文件
2014/07/20 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python使用剪切板的方法
2017/06/06 Python
python中的字典操作及字典函数
2018/01/03 Python
python3实现磁盘空间监控
2018/06/21 Python
python实现词法分析器
2019/01/31 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
行政助理的职责
2013/11/14 职场文书
2014国培学习感言
2014/03/05 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
Python实现日志实时监测的示例详解
2022/04/06 Python