jQuery queue operation method example_jquery-JS Tutorial-php.cn

jQuery queue operation method example_jquery

WBOY

Release： 2016-05-16 16:45:06

Original

1150 people have browsed it

In the core of jQuery, there is a set of queue control methods. This set of methods consists of three methods: queue()/dequeue()/clearQueue(). It can be said to be concise and easy to control functions that need to be executed continuously and sequentially. , mainly used in the animate () method, ajax and other events that need to be executed in chronological order.

Let’s first explain the meaning of this group of methods.

queue(name,[callback] ): When only one parameter is passed in, it returns and points to the queue of the first matching element (it will be a function array, the queue name defaults to fx); when two parameters are passed in, the first parameter is still the default is the queue name of fx. The second parameter is divided into two situations. When the second parameter is a function, it will add a function at the end of the queue of matching elements. When the second parameter is a function array , it will replace the queue of matching elements with a new queue (function array). Maybe, this is a bit confusing to understand.

dequeue(name): This is easy to understand, it is to remove an item from the front of the queue Queue function, and execute it.

clearQueue([queueName]): This is a new method in 1.4. Clear all queues that have not been executed on the object. The parameters are optional and the default is fx. But I personally feel that this method It's not very useful. Use the queue() method to pass in the second parameter of the two parameters to implement the clearQueue method.

Now, we want to achieve such an effect, with number squares marked from 1 to 7. These seven squares are required to fall in order from left to right. Check out the css and html parts of the DEMO
I won’t post them, they are in the DEMO. If you follow the conventional approach, you may need to use the following jQ code to achieve it:

Copy code The code is as follows:

$('.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()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).