Data structure and algorithm in JavaScript (ii): Queue _javascript Skills

A queue is a linear table that allows insertions only at one end and another for deletion operations, and queues are a first-in, first-out (FIRST-IN-FIRST-OUT,FIFO) data structure

Queues are used very frequently in program programming because JavaScript is single-threaded, causing any one time period to perform only one task, and a mixed asynchronous mechanism

The problem that comes with that:

1. When the asynchronous operation executes, the synchronization code continues, then the synchronization code relies on asynchrony and naturally goes wrong

2. Multiple synchronization tasks are called at different time periods

In the jquery animation, we often write a continuous animation code

$book. Animate ({
  opacity:0.25,
}). Animate ({
  opacity:0.5
}). Animate ({
  opacity:1
})

The intuitive feeling is that the opacity of the element becomes 0.25 after the first animate ends, and then the second animate begins, the opacity of the element becomes 0.5, and so on. But in fact, there's an essential problem here, the animation is called asynchronously, the Animate method is synchronized, so it needs to be designed to be queued, and jquery also gives a design-specific queue method for animation.

Queues are also a special kind of linear table, in JavaScript we can directly use arrays to implement such a design, the array push () method can add elements at the end of the array, the shift () method can delete the first element of the array.

function Queue () {this.datastore = [];
  This.enqueue = Enqueue;
  This.dequeue = dequeue;
  This.first = A;
  This.end = end;
  this.tostring = toString;
This.empty = empty; The/////////////////////////////Enqueue () method adds an element to the tail of the team://///////////////////////////function Enqueue (element) {this.
Datastore.push (Element); The///////////////////////////Dequeue () method deletes the elements of the team head:///////////////////////////function dequeue () {return this.datast
Ore.shift (); ///////////////////////////You can read the elements of the team head and the end of the team using the following methods:///////////////////////////function first () {return this.datastor
E[0];

Function End () {return this.datastore[this.datastore.length-1];} The ToString () method displays all elements within the queue///////////////////////////////function toString () {var RetS
  TR = "";
  for (var i = 0; i < this.dataStore.length ++i) {retstr + = This.datastore[i] + "\ n";
return retstr; //////////////////////////requires a method to determine whether the queue is empty//////////////////////////FUnction empty () {if (this.dataStore.length = 0) {return true;
  else {return false;
} var q = new Queue ();
Q.enqueue ("Aaron1");
Q.enqueue ("Aaron2");

Q.enqueue ("Aaron3");  Console.log ("Queue head:" + Q.first ());
("Aaron1"); Console.log ("Tail of queue:" + q.end ());

 ("Aaron3");

The queues are based on linear storage, then there are some of the drawbacks of sequential storage, such as queuing to buy tickets, if the first bought, the back will naturally move forward a vacancy, so that the entire queue of each member to move forward, but the JavaScript queue is described by the array, The bottom has solved some drawbacks. Of course, there are problems in the search algorithm, such as the use of arrays to implement a single linked list structure, and so on, we only discuss the JavaScript queue

Simulate jquery, using queues to implement an animation

<div id= "Div1" style= width:100px;height:50px;background:red;cursor:pointer;color: #fff; line-height:50px; "

> Click </div> (Function ($) {window.$ = $;

  } (function () {var rquickexpr =/^ (?: # ([\w-]*)) $/;
  function Aquery (selector) {return new AQuery.fn.init (selector);
    /** * Animation * @return {[type]} [description]/var animation = function () {var self = {}; var Queue = []; Animation queue var fireing = false//animated lock var-a = true; To trigger the var GetStyle = function (obj, attr) {return obj.currentstyle? Obj.currentstyle[attr] by the Add interface: getcomputed
    Style (obj, false) [attr]; The var Makeanim = function (element, options, func) {var width = options.width//wrapping a specific execution algorithm//cs
      S3//settimeout element.style.webkitTransitionDuration = ' 2000ms ';

      Element.style.webkitTransform = ' Translate3d (' + width + ' px,0,0 '); Listening to animation end Element.addeventlistener (' Webkittransitionend ', functIon () {func ()});
        The var _fire = function () {//Join animation is triggering an if (!fireing) {var oncerun = Queue.shift ();
          if (oncerun) {fireing = true;
            Next Oncerun (function () {fireing = false;
          _fire ();
        });
        else {fireing = true; } return self = {//increase queue add:function (element, options) {Queue.push (function) (func
        ) {Makeanim (element, options, func);

        });
          If there is a queue that immediately triggers an animated if (a && queue.length) {i = false;
        Self.fire ();
      },//Trigger Fire:function () {_fire ();


  }
    }
  }();
      Aquery.fn = Aquery.prototype = {run:function (options) {Animation.add (this.element, Options);
    return this;
    The var init = AQuery.fn.init = function (selector) {var match = rquickexpr.exec (selector); var element= document.getElementById (match[1]) this.element = element;
  return this;

  } init.prototype = Aquery.fn;
return aquery;

}());

Dom var odiv = document.getElementById (' Div1 '); Call Odiv.onclick = function () {$ (' #div1 '). Run ({' Width ': '} '). Run ({' width ': ' = '} '). Run ({' width ')
': ' 1000 '});

 };

Test

<!doctype html><div id= "Div1 style=" Width:100px;height:50px;background:red;cursor:pointer;color: #fff; text-align:center;line-height:50px; "Data-mce-style=" width:100px; height:50px; background:red; Cursor:pointer; Color: #fff; Text-align:center; line-height:50px; "

> Click </div><script type= "Text/javascript" > (function ($) {window.$ = $;

 } (function () {var rquickexpr =/^ (?: # ([\w-]*)) $/;
 function Aquery (selector) {return new AQuery.fn.init (selector);
 /** * Animation * @return {[type]} [description]/var animation = function () {var self = {}; var Queue = []; Animation queue var fireing = false//animated lock var-a = true; Triggers the var getstyle = function (obj, attr) {return obj.currentstyle? Obj.currentstyle[attr]: getComputedStyle (o
 BJ, False) [attr];
  var Makeanim = function (element, options, func) {var width = options.width//wrapper specific execution algorithm//CSS3//settimeout
  element.style.webkitTransitionDuration = ' 2000ms '; Element.style.webkitTraNsform = ' Translate3d (' + width + ' px,0,0 ');
 Monitor animation completion Element.addeventlistener (' Webkittransitionend ', function () {func ()});
  The var _fire = function () {//Join animation is triggering an if (!fireing) {var oncerun = Queue.shift ();
   if (oncerun) {fireing = true;
   Next Oncerun (function () {fireing = false;
   _fire ();
  });
  else {fireing = true;  }} return self = {//Add queue add:function (element, options) {Queue.push (function (func) {Makeanim (element,
  Options, func);

  });
   If there is a queue that immediately triggers an animated if (a && queue.length) {i = false;
  Self.fire ();
  },//Trigger Fire:function () {_fire ();


 }
 }
 }();
  Aquery.fn = Aquery.prototype = {run:function (options) {Animation.add (this.element, Options);
 return this;
 The var init = AQuery.fn.init = function (selector) {var match = rquickexpr.exec (selector);
 var element = document.getElementById (match[1]) this.element = element;
 return this; } init.prototype = Aquery.fn;

 return aquery;


}());

Dom var odiv = document.getElementById (' Div1 '); Call Odiv.onclick = function () {$ (' #div1 '). Run ({' Width ': '} '). Run ({' width ': ' = '} '). Run ({' width ')
': ' 1000 '});

};

 </script>