Data Structures and Algorithms in JavaScript (2): queuing _ javascript skills

This article mainly introduces the data structure and algorithm in JavaScript (2): queue is a linear table that allows only one end to be inserted and the other to be deleted, A queue is a data structure of First-In-First-Out (FIFO). If you need a queue, you can refer to the queue to only allow insertion at one end, in another linear table for deletion, the queue is a data structure of First-In-First-Out (FIFO ).

The queue is frequently used in programming. Because javascript is a single thread, only one task can be executed in any time period, and asynchronous mechanisms are also involved,

The following problems occur:

1. when the asynchronous operation is executed, the synchronization code continues, so the synchronization code depends on asynchronization, and errors will naturally occur.

2. multiple synchronization tasks are called in different time periods

In jQuery animation, we often write a piece of continuous animation code.

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

The intuitive feeling is that after the first animation ends, the opacity of the element changes to 0.25, the second animation is executed, 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 specifically designed for animation.

The queue is also a special 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, shift () you can delete the first element of the array.

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 dequeue () {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, so 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 the javascript queue

Simulate jQuery and use queues for an animation

Click
(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 ('p1'); // call oDiv. onclick = function () {$ ('# P1 '). run ({'width': '000000 '}). run ({'width': '000000 '}). run ({'width': '000000 '});};

Test

Click