The jquery queue is Shared with the native mock its implementation

  • 2020-03-30 02:26:53
  • OfStack

The queue() method displays or operates on the queue of functions executed on the matching element.

The process of queue and dequeue is mainly as follows:

Add a function to a queue (usually an array of functions) with a queue
Remove the first function from the array of functions with the dequeue and execute (remove and execute with the shift() method)
Which means that when you execute the dequeue again, you get another function. It also means that if a dequeue is not executed, the next function in the queue will never be executed.

For an animate method to animate on an element, jQuery internally adds it to a function queue called fx. To animate multiple elements in turn, we have to manually set the queue.

An example of moving two divs to the left:


<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(" End of the animation ")}
 ];
 var aniCB=function() {
  $(document).dequeue("myAnimation");
 }
 $(document).queue("myAnimation",FUNC)
 //aniCB();
</script>

I started by creating an array of functions with the animation of the columns to be executed in turn
Then I define a callback function that USES the dequeue method to execute the next function in the queue
I'm going to put this array of functions in the queue of myAnimation on the document
Finally I execute the first function in the queue
The nice thing about this is that the array of functions is linearly expanded, so it's easy to add and subtract. Also, when you don't want to continue with the next animation (such as when the user clicks a button), you just need to clear that queue. To add more, simply join the queue.


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

Queue implementation of animate in jQuery. The following is an imitation of an animation in JavaScript:


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);


Related articles: