jquery queue queues and native emulation of their implementation method sharing

Queue and dequeue in  jquery are a useful set of methods that are particularly useful for a series of functions that require sequential operation. Special animate animations, Ajax, and timeout functions that require a certain amount of time

The queue () method displays or operates a function queue that executes on a matching element. The process of   queue and dequeue is mainly as follows:   use queue to add functions to queues (usually function arrays) dequeue The first function in the function array and execute (remove and execute with the Shift () method) It means that when you perform the dequeue again, you get another function. It also means that if you do not perform dequeue, the next function in the queue will never be executed.   Execute animate method animation on an element, and jquery will add it to the function queue named FX. And for multiple elements to be animated sequentially, we must set up the queue manually.   An example, to two div to move to the left: the   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: "=grey"},ANICB);},   function () {$ ("# Block1 "). Animate ({color:" =green "},ANICB)},   function () {alert (" Animation End ")}  ];  var anicb=function () {  $ (document). Dequeue ("Myanimation");  }  $ (document). Queue ("Myanimation ", FUNC)  //ANICB (); </script> &NBSp   I first set up an array of functions, where some of the columns need to be executed sequentially. Then I defined a callback function, using the Dequeue method to execute the next function in the queue. Then put the function array on the Myanimation queue on document (you can select any element, I just put this queue on document for convenience) and finally I start executing the first function in the queue the advantage of this is that the function array is linearly expanded, It is very convenient to increase or decrease. Also, when you don't want to continue with the next animation (such as when a user clicks a button), you just need to clear the queue. To add more, you just need to join the queue. The   code is as follows://Empty queue $ (document). Queue ("Myanimation", []); Add a new function in the last $ (document). Queue ("Myanimation", function () {alert ("animation is really over!"). ")});     This, of course, can also be used for methods such as Ajax, and if you need a series of Ajax interactions, each Ajax will want to start at the end of the previous one, the original method is to use the callback function, but this is too cumbersome. Also use queue to add queues, one dequeue at a time after each Ajax callback.   jquery in the animation animate queue implementation, the following JavaScript imitate a:   code as follows: function Queue () { THIS.A = [];  this.t = null;} Q Ueue.prototype = { queue:function (s) {  var self = this;   This.a.push (s);   This.hold ();   Retu RN this; &NBSP},  hold:function () {  var self = this;   cleartimeout (THIS.T);   THIS.T = settimeout (function () {   console.log ("Queue start!", SELF.A)    self.dequeue ();  },0);  }, &NBsp;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 (. Queue). Queue (1500). Queue (2000); \ n