Queue and dequeue usage in jQuery

Queue and dequeue in jQuery are a group of useful methods, which are especially useful for a series of functions that require running in order. Special Functions that take some time, such as animate animation, ajax, and timeout

The process of queue and dequeue is as follows:
1. Use queue to add functions to the queue (usually a Function Array)
2. Use dequeue to retrieve the first function in the function array, and execute (use shift () to retrieve and execute)

This means that when you execute dequeue again, you get another function.
It also means that if dequeue is not executed, the next function in the queue will never be executed.

If you execute the animate method and add an animation to an element, jQuery also adds it to the function queue named fx.
To execute animations for Multiple Elements in sequence, you must manually set the queue.

In one example, we need to move the two divs to the left one by one. Click here to view details.

1. Div {
2. Background: # aaa;
3. Width: 18 px;
4. Height: 18 px;
5. Position: absolute;
6. Top: 10 px;
7. }

1. <Div id = "block1"> </div>
2. <Div id = "block2"> </div>

If the number of shifts is small, you can use the animate callback function. One animation is placed in the callback of another animation.
For example

1. $ ("# Block1"). animate ({left: "++ = 100"}, function (){
2. $ ("# Block2"). animate ({left: "++ = 100"}, function (){
3. $ ("# Block1"). animate ({left: "++ = 100"}, function (){
4. $ ("# Block2"). animate ({left: "++ = 100"}, function (){
5. $ ("# Block1"). animate ({left: "++ = 100"}, function (){
6. Alert ("animation ends ");
7. });
8. });
9. });
10. });
11. });

However, this method is cruel when there are many animations.

In this case, using queue and dequeue is much simpler:

1. Var FUNC = [
2. Function () {$ ("# block1"). animate ({left: "+ = 100"}, aniCB );},
3. Function () {$ ("# block2"). animate ({left: "+ = 100"}, aniCB );},
4. Function () {$ ("# block1"). animate ({left: "+ = 100"}, aniCB );},
5. Function () {$ ("# block2"). animate ({left: "+ = 100"}, aniCB );},
6. Function () {$ ("# block1"). animate ({left: "+ = 100"}, aniCB );},
7. Function () {alert ("animation ends ")}
8. ];
9. Var aniCB = function (){
10. $ (Document). dequeue ("myAnimation ");
11. }
12. $ (Document). queue ("myAnimation", FUNC );
13. AniCB ();

1. First, I suggest a function array, which contains some columns that need to be executed in sequence.
2. Then I defined a callback function and used the dequeue method to execute the next function in the queue.
3. Place the function array in the queue of myAnimation on the document (you can select any element. I just put this queue on the document for convenience)
4. Finally, I started to execute the first function in the queue.

The advantage of doing so is that the function array is linearly expanded, which is very convenient to increase or decrease.
In addition, when you do not want to continue the next animation (for example, if you click a button), you only need to clear the queue. To add more, you only need to join the queue.

1. // Clear the queue
2. $ (Document). queue ("myAnimation", []);
3. // Add a new function to the end
4. $ (Document). queue ("myAnimation", function () {alert ("the animation is really over! ")});

I used to publish a wait plug-in to pause the animation for a period of time.
Http://shawphy.com/2008/07/enabling-settimout-within-chained-functions-in-jquery.html
You can see that it uses this principle. By default, a timeout is inserted in fx and put into the queue. After the timeout ends, dequeue is executed to continue executing the next function in the queue.

This can also be used in methods such as ajax. If you need a series of ajax interactions, each ajax wants to start after the previous end. The original method is to use the callback function, but this is too troublesome. Similarly, you can use queue to add a queue and execute dequeue once in the callback after each ajax operation.

If you do not use the jQuey library, you can also write a simple code segment to solve this problem. See control queue functions.