jquery Source Analysis Series (38): Queue operations

Queue queues, like the data cache and the deferred asynchronous model, are the internal implementation infrastructure of the jquery library

The queue queue is the infrastructure that animate animations relies on, and the queues in the entire jquery are only used for animations

Queue queues

A queue is a special linear table that allows for delete operations (team headers) only at the front end of the table (a team header), and inserts at the back end of the table (queue footer). The queue is characterized by FIFO (Fifo-first in First out), where the first inserted element is first deleted.

Why are queues introduced?

We know that the execution flow of code is asynchronous and synchronous, for example

var a = 1; setTimeout (function() {    = 2;},0//  1

We have been accustomed to writing code logic "linearly", but in JavaScript programming almost always accompanies asynchronous operations:

Settimeout,css3 transition/animation,ajax,dom Drawing, Postmessage,web database and so on, a lot of asynchronous operations brought about by the callback function, will break down our algorithm fragmented

Before we said that for asynchronous + callback mode, how to "flatten out" asynchronous operations, as synchronous, because the asynchronous operation of the process control is nothing but to avoid nesting a large number of callback logic, so there will be a promises convention

So the jquery introduction queue is actually viewed from an angle: allowing a series of functions to be called asynchronously without blocking the program

$ ("#Aaron"). Slideup (). FadeIn ()

This is a group of jquery animation chain sequence, its internal is actually a set of queue queues, so the queue and deferred status similar, is an internal use of infrastructure, when Slideup run, Fadein is placed in the FX queue, when the Slideup is complete, is removed from the queue and runs. The queue function allows direct manipulation of the behavior of this chained call. At the same time, the queue can specify the name of the queues for additional capabilities, not limited to the FX queue

jquery provides an API for 2 groups of queue operations:

• Jquery.queue/dequeue
• Jquery.fn.queue/dequeue

However, unlike normal queues, jquery.queue and JQuery.fn.queue not only perform a team operation, return team header elements, but also automatically perform the returned team header elements.

FN is an extension of the Advanced API on the prototype that is provided to the instance, the. Queue/.dequeue, which is called by the $.queue,$.dequeue static underlying method to implement into row and dequeue

$.queue: Show or manipulate a function queue that has been executed on a matching element

This method has two functions, it is both a setter and a getter. The first parameter, Elem, is a DOM element, the second argument type is a string, and the third parameter, data, can be a function or an array.

var body = $ (' body '); function CB1 () {alert (1)}function CB2 () {alert (2)}//set/ / The third parameter is function$.queue (body, ' AA '//get$.queue (body, ' AA ')  // [function, Function]

This method is a bit of a type get a queue-like push operation, jquery method interface overload is very serious, often the same interface is set is also get, regardless of the character does not conform to the basic principle, but it is very useful

is simply to cache the data, why the carrier is a jquery object, because the means to save data through the data cache implementation

New Data ();

Queuefunction(Elem, type, data) {varqueue; if(elem) {type= (Type | | "FX") + "queue"; Queue=data_priv.get (Elem, type); //dequeue by getting out quickly if the is just a lookup        if(data) {if(!queue | |Jquery.isarray (data)) {Queue=data_priv.access (Elem, type, Jquery.makearray (data)); } Else{queue.push (data); }        }        returnQueue | | []; }},

Between the data and the jquery object is a non-coupling mapping relationship through the UUID, which can be browsed through the previous

Source has a default processing

Type = (Type | | "FX") + "queue"

Visible is dedicated for FX animation queue processing

$.dequeue: The next function in the execution queue on the matching element

var body = $ (' body '); function CB1 () {console.log (11111)}function cb2 () {console.log (22222)}//  Set//  The third parameter is function$.queue (body, ' AA' AA ')  //  one $.dequeue (body, ' AA ')  //

The dequeue is a bit like the shift operation, but the difference is that the CB1 and CB2 are executed.

The callback function is executed in a dequeue, only one at a time for each call, so when the callback has n, you need to call the $.dequeue method n times the element to all dequeue

To see the source code:

var queue = jquery.queue (elem, type),    = queue.length,    = queue.shift (),    = jquery._queuehooks (elem, type),    function() {        jquery.dequeue (elem, type);    }; 

Know the principle, this is very simple, through the queue get out of all the data, judge the length, then intercept the first, and then do a preprocessing to generate the next second

Is there a hooks here?

Careful analysis of this internal queuehooks

function (Elem, type) {    var key = Type + "Queuehooks";     return data_priv.get (Elem, key) | | data_priv.access (Elem, key, {        empty:jQuery.Callbacks ("Once Memory"). Add (function() {             + "queue", Key]);})}    );

We said that Dequeue not only takes out but also executes, passing next and hooks to the external callback at the time of execution,

This is the logic of JS is very much around the place, inside can pass a reference out, but also to provide external calls or execute

Fn.call (Elem, Next, hooks)

Because we passed next, our code could change this.

var body = $ (' body '); function CB1 (next,hoost) {    console.log (11111)    next ()  // executed CB2//22222 }function  cb2 () {    console.log (22222)}//Set  //  The third parameter is function$.queue (body, ' AA' AA ')

Next internal still calls $.dequeue, so you can then execute the next callback in the queue

The hooks in $.dequeue is the final cleanup when all callback in the queue are executed (at this point startlength is 0)

if (!startlength && hooks) {    hooks.empty.fire ();}

The hook is actually the Jquery.callbacks object, can implement a collector's function, as to under what circumstances, after the animation began to analyze

So the essence of the queue is to use the push and shift of the array to do FIFO (first-in-out), but the disadvantage of this method is also obvious, unable to do a separate module processing, because it must be consistent with the jquery object, And the data passed is only a function.