Use a queue to simulate jquery's animation algorithm

Use a queue to simulate jquery's animation algorithm

Aaron recently fell in love with algorithm research. It is estimated that many brain cells will be killed and killed again. I like to pick up the ready-made ones and save some effort. I found a piece of source code he wrote. It was quite interesting to run it. So I analyzed it to absorb the nutrition in it, and to deepen the learning capability of source code. The source code is really a secret to improve the internal strength of js. If you don't believe it, come and have a taste with me.

// Execute the function immediately. There is nothing to say. See the following demo/** (function ($) {// $ here will be provided by the return value of the immediately executed function followed by}) (function () {// The result of running this function is $ la return aQuery} () */(function ($) {window. $ =$ ;}) (function () {// used to match the ID string //(?: Indicates not grouping here), refer to the regular content // But I personally think it would be better to change * to the + number, because # requires at least one character. var rquickExpr =/^ (?: # ([\ W-] *) $/; // jquery's severe patient 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];} // all these are specific animation effects. There is no obscure 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 () {// Add the animation to trigger if (! Fireing) {var onceRun = Queue. shift (); if (onceRun) {// prevent repeated triggering of fireing = true; // next onceRun (function () {fireing = false; // here the effects of serial call are cleverly generated _ fire () ;}) ;}else {fireing = true ;}}return self ={// add a queue: function (element, options) {// here is the key to the entire algorithm // equivalent to adding a function to the array // [function (func) {},...] // that is, the onceRun method in _ fire. func was passed in at that time. // You like this technique in Aaron's programming, such as pre-compilation. Queue. push (function (func) {makeAnim (element, options, func) ;}); // if a Queue immediately triggers the animation if (first & Queue. length) {// This toggle is used to control the elements added after the queue. first = false; // It is equivalent to running _ fire () directly (); // Aaron prefers to install A and intentionally adds A self. when the fire came out, maybe he was thinking about self. fire () ;}}, // trigger fire: function () {_ fire () ;}}(); aQuery. fn = aQuery. prototype = {run: function (options) {animation. add (this. element, options); return this;} var init = aQ Uery. fn. init = function (selector) {var match = rquickExpr.exe c (selector); var element = document. getElementById (match [1]) this. element = element; return this;} // almost underestimated this line of code. // jquery looks good. // aQuery directly. fn. init = aQuery. isn't fn better? // One More init variable is nothing more than reducing queries. The idea of optimization is everywhere. 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 '});};

Attach html and you can adjust it yourself. Remember to use chrome for browsing.

Click

Demo address: this will not be demonstrated.

Other highlights
JQuery tutorial (19)-jquery ajax operation serialization form jQuery tutorial (18)-ajax operation execution POST request jQuery tutorial (20) -jquery ajax + php operations provide different Ajax requests... jQuery tutorial (21)-jquery ajax callback function jQuery tutorial (22)-ajax operation error handling jQuery tutorial (24)-ajax operations and events