Data Structure and algorithm JavaScript (2) queue

Data Structure and algorithm JavaScript (2) queue
A queue is a linear table that only allows insertion at one end and deletion. A queue is a First-In-First-Out (FIFO) data Structure queues are frequently used in program design. Because javascript is single-threaded, only one task can be executed in any period of time, and asynchronous mechanisms are also involved, the following problems: 1. when the asynchronous operation is executed, the synchronization code continues, so the synchronization code depends on Asynchronization, and errors will naturally occur. multiple synchronization tasks are called in jQuery animations in different time periods. We often write a continuous animation code $ book. animate ({opacity: 0.25 ,}). animate ({opacity: 0.5 }). animate ({opacity: 1}) gives us an intuitive feeling: after the first animation ends, the opacity of the element changes to 0.25, and then continues executing the second animation. the opacity of the element changes to 0.5, and so on. But in fact, an essential problem is designed here. animation is called asynchronously, And the animate method is executed synchronously. Therefore, we need to design it to the queue, jQuery also provides a queue method queue specially designed for animation, which is also a special linear table. In JavaScript, we can directly use arrays to implement such a design. The array push () you can add an element to the end of the array, while the shift () method can delete the first element of the array. Copy the code function Queue () {this. dataStore = []; this. enqueue = enqueue; this. dequeue = dequeue; this. first = first; this. end = end; this. toString = toString; this. empty = empty;} // enqueue () method to add an element to the end of the team: /// // function enqueue (element) {this. dataStore. push (element);} // dequeue () method to delete the first element of a team: // function d Equeue () {return this. dataStore. shift ();} /////////////// // you can use the following method to read the elements of the first and last teams: /// // function first () {return this. dataStore [0];} function end () {return this. dataStore [this. dataStore. length-1];} // toString () display all the elements in the queue () {var retStr = ""; for (var I = 0; I <this. dataStore. length; + + I) {retStr + = this. dataStore [I] + "\ n";} return retStr ;} /// // a method is required 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 ("python3"); console. log ("queue header:" + q. first (); // ("python1"); console. log ("queue tail:" + q. end (); // ("python3"); the queue uses Linear storage, there are some drawbacks of sequential storage, such as queuing for tickets. if the first one is purchased, the latter will naturally move forward to a blank space, in this way, every member of the entire queue needs to move forward, but the JavaScript queue is described in arrays, and the underlying layer solves some drawbacks. Of course, there are also search algorithm problems, such as using arrays to implement a single-chain table structure. Here we only discuss javascript queue simulation jQuery, use the queue to implement an animation <div id = "div1" style = "width: 100px; height: 50px; background: red; cursor: pointer; color: # fff; text-align: center; 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 // animation lock var first = true; // trigger var getStyle = function (obj, attr) through the add Interface) {return obj. currentStyle? Obj. currentStyle [attr]: getComputedStyle (obj, false) [attr];} var makeAnim = function (element, options, func) {var width = options. width // encapsulate the specific execution algorithm // css3 // setTimeout element. style. webkitTransitionDuration = '2000m'; element. style. webkitTransform = 'translate3d ('+ width + 'px,)'; // listen to the animation end element. addEventListener ('webkittransitionend', function () {func ()});} var _ fire = function (){/ /Adding an animation to trigger if (! Fireing) {var onceRun = Queue. shift (); if (onceRun) {fireing = true; // next onceRun (function () {fireing = false; _ fire ();});} else {fireing = true ;}} return self = {// add Queue: function (element, options) {Queue. push (function (func) {makeAnim (element, options, func) ;}); // if a Queue immediately triggers the animation if (first & Queue. length) {first = false; self. fire () ;}}, // trigger fire: function () {_ fire () ;}}(); aQuery. fn = aQuery. prototype = {run: function (options) {animation. add (this. element, options); return this;} var init = aQuery. fn. init = function (selector) {var match = rquickExpr.exe c (selector); var element = document. getElementById (match [1]) this. element = element; return this;} init. prototype = aQuery. fn; return aQuery;} (); // domvar oDiv = document. getElementById ('div1 '); // call oDiv. onclick = function () {$ ('# div1 '). run ({'width': '000000 '}). run ({'width': '000000 '}). run ({'width': '000000 '});};