jquery queue queue and native imitation of its implementation method sharing_jquery

The

queue() method displays or operates on a queue of functions executed on matching elements.

The processes of queue and dequeue are mainly:

Use queue to add the function to the queue (usually a function array)
Use dequeue to take out the first function in the function array and execute it (use the shift() method to take out and execute it)
That means 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.

For executing the animate method and animation on an element, jQuery will also add it to the function queue named fx internally. For multiple elements to be animated in sequence, we must manually set the queue.

An example to move two divs to the left in sequence:

Copy the code The code is as follows:

div 1

div 2

I first created a function array, which contains a series of animations that need to be executed in sequence
Then I defined a callback function and used the dequeue method to execute the next function in the queue
Then I added this function The array is placed 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 start executing the first function in the queue
The benefits of this The reason is that the function array is linearly expanded, making it very convenient to increase or decrease. Moreover, when you no longer want to continue the next animation (for example, the user clicks a button), you only need to clear the queue. To add more, just join the queue.

Copy code The code is as follows:

//Clear the queue
$(document). queue("myAnimation",[]);
//Add a new function at the end
$(document).queue("myAnimation",function(){alert("The animation is really over! ")});

Of course this can also be used for methods like ajax. If a series of ajax interactions are required, each ajax wants to start after the previous one ends. The most original method before was to use a callback function, but this is too troublesome. Also use queue to add a queue, and execute dequeue once in the callback after each ajax.

Queue implementation of animation animate in jQuery, imitate one using JavaScript below:

Copy code The 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.a);
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);