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编程开发中的五个实用小技巧
Jul 22 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
如何编写高质量JS代码
Dec 28 Javascript
javascript学习小结之prototype
Dec 03 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
javascript实现扫雷简易版
Aug 18 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 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
原生js获取left值和top值的三种方法
2017/08/02 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python:动态路由的Flask程序代码
2019/11/22 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
广州盈通面试题
2015/12/05 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
简单租房协议书
2014/04/09 职场文书
高一学生评语大全
2014/04/25 职场文书
农行心得体会
2014/09/02 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
催款函范本大全
2015/06/24 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android