Share the jquery queue with native to imitate its Implementation Method

The function queue that the queue () method displays or operates on matching elements.

The process of queue and dequeue is as follows:

Use queue to add functions to the queue (usually a Function Array)
Use dequeue to retrieve the first function in the function array, and execute (use shift () to retrieve and execute)
This means that when dequeue is executed again, another function is obtained. It also means that if dequeue is not executed, the next function in the queue will never be executed.

If you execute the animation Method on 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:
Copy codeThe Code is as follows:
<Div id = "block1"> div 1 </div>
<Div id = "block2"> div 2 </div>
<Script type = "text/javascript">
Var FUNC = [
Function () {$ ("# block1"). animate ({color: "= blue"}, aniCB );},
Function () {$ ("# block2"). animate ({color: "= red"}, aniCB );},
Function () {$ ("# block1"). animate ({color: "= yellow"}, aniCB );},
Function () {$ ("# block2"). animate ({color: "= gray"}, aniCB );},
Function () {$ ("# block1"). animate ({color: "= green"}, aniCB );},
Function () {alert ("animation ends ")}
];
Var aniCB = function (){
$ (Document). dequeue ("myAnimation ");
}
$ (Document). queue ("myAnimation", FUNC)
// AniCB ();
</Script>

First, I created a function array, which contains animations that need to be executed in sequence by columns.
Then I defined a callback function and used the dequeue method to execute the next function in the queue.
Then, 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)
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.
Copy codeThe Code is as follows:
// Clear the queue
$ (Document). queue ("myAnimation", []);
// Add a new function to the end
$ (Document). queue ("myAnimation", function () {alert ("the animation is really over! ")});

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.

The queue Implementation of animation in jQuery, which is imitated by JavaScript below:
Copy codeThe Code is as follows:
Function Queue (){
This. a = [];
This. t = null;
}
Queue. prototype = {
Queue: function (s ){
Var self = this;
This. a. push (s );
This. hold ();
Return this;
},
Hold: function (){
Var self = this;
ClearTimeout (this. t );
This. t = setTimeout (function (){
Console. log ("Queue start! ", Self. );
Self. dequeue ();
}, 0 );
},
Dequeue: function (){
Var s = this. a. shift (), self = this;
If (s ){
Console. log ("s:" + s );
SetTimeout (function (){
Console. log ("end:" + s );
Self. dequeue ();
}, S );
}
}
};
Var a = new Queue (). queue (500). queue (200). queue (400). queue (1500). queue (300). queue (2000 );