Example of jQuery queue operation method

At the heart of jQuery is a set of queue control methods, which consist of three methods: queue()/dequeue()/clearQueue(). This set of methods controls functions that need to be executed in a sequential sequence, and is applied to animate () methods, ajax, and other events that are executed in a chronological order.

Let's first explain what each of these methods means.

Queue (name,[callback]): when only one parameter is passed in, it returns and points to the queue of the first matched element (which will be an array of functions and the queue name is fx by default). When there are two parameters to the first parameter is the default for fx queue name, the second parameter is divided into two kinds of circumstances, when the second parameter is a function, it will add of the matched elements on the queue and finally a function. When the second parameter is a function of the array, it will match the elements of the queue using a new queue instead of array (function), the understanding a bit dizzy.

Dequeue (name): this is easy to understand, which is to remove a queue function from the front of the queue and execute it.

ClearQueue ([queueName]): this is a new method in 1.4. Clear all queues that have not yet been executed on the object. Parameters are optional, and the default is fx.

Now, we're going to implement the effect of having squares of Numbers marked 1 through 7, and asking the seven squares to fall from left to right. Check out the DEMO
I will not post the CSS and HTML parts, which are included in the DEMO. If you follow the general practice, you may need to use the following jQ code to implement:

$('.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(' The falling body ends in sequence ! Yeah!')
                        });
                    });
                });
            });
        });
    });
});

Well, yes, the effect is perfect, but can you stand the dizzy code? Even if you can stand it, what if you want to switch the order of execution, for example, if you want the 5 to fall before you start the 3, or if you want to add 8 to 15 cubes? Rewrite? Be careful what you do inside? Obviously, we need another simple and convenient way to achieve this effect, which is the jQuery queue control method. See the following code:

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(' The falling body ends in sequence ! Yeah!');
    });
}];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
    $('#demo').dequeue('slideList');
};
_takeOne();

Doesn't that make it look a lot simpler. How?
1. Create a new array and put the animation functions in sequence. ;
2. Add this array of animation functions to the slideList queue with the queue;
3. Fetch the first function in the slideList queue with the dequeue and execute it;
4. Execute the first function initially.

As for the clearQueue() method, it is the clearQueue() method that is called by the stop button in the demonstration. Of course, you can also use the queue() method to directly replace the current queue function with an [] empty array implementation.