jquery queue and native mimic its implementation

The queue and dequeue in jquery are a useful set of methods that are particularly useful for a series of functions that need to be run sequentially. Special animate animations, Ajax, and timeout functions that take a certain amount of time.

The queue () method displays or operates function queues that are executed on matching elements.

The process of queue and dequeue is mainly:

1. Queue functions into queues (usually arrays of functions) K7 Casino
2. Take the first function in the function array with Dequeue and execute (with the shift () method to remove and execute)

It also 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 execute.

Animating a animate method on an element, jquery also adds it to the function queue named FX. For multiple elements to be animated sequentially, we must manually set up the queue.

For example, to move the two div to the left:

01	<div id="block1">div 1</div>

02	<div id="block2">div 2</div>

03	<script type="text/javascript">

04

varFUNC=[

05	function() {$("#block1").animate({color:"=blue"},aniCB);},

06	function() {$("#block2").animate({color:"=red"},aniCB);},

07	function() {$("#block1").animate({color:"=yellow"},aniCB);},

08	function() {$("#block2").animate({color:"=grey"},aniCB);},

09	function() {$("#block1").animate({color:"=green"},aniCB);},

10	function(){alert("动画结束")}

11

];

12	varaniCB=function() {

13	$(document).dequeue("myAnimation");

14

}

15	$(document).queue("myAnimation",FUNC)

16	//aniCB();

17

</script>

1. I first set up an array of functions, which are the animations that some columns need to be executed sequentially
2. Then I define a callback function to execute the next function in the queue using the Dequeue method
3. The function array is then placed in the Myanimation queue on document (any element can be selected, I just put this queue on the document for convenience)
4. Finally I started executing the first function in the queue

The advantage of this is that the function array is linear expansion, which is very convenient to increase or decrease. Also, when you do not want to continue with the next animation (such as the user clicked a button), only need to clear the queue. To add more, you only need to join the queue.

1

//清空队列

2	$(document).queue("myAnimation",[]);

3	//加一个新的函数放在最后

4	$(document).queue(“myAnimation”,function(){alert("动画真的结束了！")});

This can also be used for methods such as Ajax, if you need a series of Ajax interactions, each Ajax would like to start at the end of the previous, the most primitive method is to use a callback function, but this is too much trouble. Also use the queue to add queues, each time after the Ajax callback to execute once dequeue.

The queue implementation of animated animate in jquery, using JavaScript to mimic one:

View Source print?

01	functionQueue(){

02	this.a = [];

03	this.t = null;

04

}

05	Queue.prototype = {

06	queue:function(s){

07	varself = this;

08	this.a.push(s);

09	this.hold();

10	returnthis;

11

},

12	hold:function(){

13	varself = this;

14	clearTimeout(this.t);

15	this.t = setTimeout(function(){

16	console.log("Queue start! ",self.a);

17	self.dequeue();

18

},0);

19

},

20	dequeue:function(){

21	vars = this.a.shift(),self = this;

22

if(s){

23	console.log("s:"+s);

24	setTimeout(function(){

25	console.log("end:"+s);

26	self.dequeue();

27

},s);

28

}

29

}

30

};

31

32	vara = newQueue().queue(500).queue(200).queue(400).queue(1500).queue(300).queue(2000);

jquery queue and native mimic its implementation