JQuery source code analysis series (38): queue operations

Like the data cache and Deferred asynchronous models, the Queue is the internal infrastructure implemented by the jQuery library. The Queue is the infrastructure that animate animation relies on, the Queue in jQuery is only supplied to the animation. The Queue is a special linear table, which can only be deleted (out of the Queue) at the front end of the table (in the Queue header ), insert a table to the backend of the table (at the end of the Team ). The queue features FIFO-first in first out, that is, the first element to be inserted is deleted first. Why should I introduce a queue? We know that the execution stream of the Code is divided into asynchronous and synchronous, such as copying the code var a = 1; setTimeout (function () {a = 2 ;}, 0) alert () // 1 copying code we have always been used to writing code logic "linearly", but JavaScript programming is almost always accompanied by asynchronous operations: setTimeout, CSS3 Transition/Animation, ajax, dom rendering, postmessage, Web Database, and so on. Callback functions brought about by a large number of asynchronous operations will break down our algorithms. Before that, we mentioned the asynchronous + callback mode, how to "flatten" asynchronous operations to make them the same as synchronization, because asynchronous operations do not need to nest a large number of callback logics for process control, so there will be a promises convention, so jQuery introduces the queue in fact from a perspective can be considered: Allow a series of functions to be called asynchronously without blocking the program $ ("# Aaron "). slideUp (). fadeIn () This is a set of animated chained sequences of jQuery. It is actually a group of Queue columns internally, so the Queue is similar to the Deferred status and is an internal infrastructure. When slideUp is running, fadeIn is put into the fx queue. After slideUp is complete, it is taken out and run from the queue. The queue function allows you to directly perform operations on this chained call. At the same time, queue can specify the queue name to obtain other capabilities, not limited to the fx queue. jQuery provides two APIs for group Column Operations: jQuery. queue/dequeuejQuery. fn. the difference between queue and dequeue is that jQuery. queue and jQuery. fn. the queue not only executes the team-out operation, but also returns the team Header element. It also automatically executes the returned team Header element fn, which is extended to the advanced API on the prototype and is provided to the instance ,. queue /. dequeue, which is called internally. queue ,. dequeue static underlying method for columns and columns $. queue: displays or operates on matched elements. The executed function queues. This method has two functions: setter and getter. The first parameter elem is a DOM element, the second parameter type is a string, and the third parameter data can be a function or array. Copy the code var body =$ ('body'); function cb1 () {alert (1)} function cb2 () {alert (2)} // set $. queue (body, 'A', cb1); // The third parameter is function $. queue (body, 'A', cb2); // get $. queue (body, 'aa') // [function, function] copying code. This method is a bit of a type. get is a bit similar to the push operation of the queue. The interface overload of the jQuery method is very serious, often, the same interface is set and get, regardless of whether the operator does not comply with the basic principles, but it is very practical. It is nothing more than caching the data. Why is the carrier a jQuery object, because the data is saved through the Data cache, data_priv = new data (); copy the code queue: function (elem, type, data ){ Var queue; if (elem) {type = (type | "fx") + "queue"; queue = data_priv.get (elem, type ); // Speed up dequeue by getting out quickly if this is just a lookup if (data) {if (! Queue | jQuery. isArray (data) {queue = data_priv.access (elem, type, jQuery. makeArray (data);} else {queue. push (data) ;}} return queue | [] ;}}, copying code data and jQuery objects establishes a non-coupling ing relationship through uuid, for details, refer to the previous "data cache" Source code with a default processing type = (type | "fx") + "queue" visible to be dedicated to the fx animation queue for processing $. dequeue: copy the code var body =$ ('body'); function cb1 () {console. log (11111)} function cb2 () {console. log (22222)} // set $. que Ue (body, 'A', cb1); // The third parameter is function $. queue (body, 'A', cb2); $. dequeue (body, 'A') // 11 $. dequeue (body, 'aa') // 22 copying code to columns is a bit similar to the shift operation, but the difference is that the cb1 and cb2 will execute the callback function out of columns, only one column is provided for each call. Therefore, when there are N callbacks, you need to call $. the dequeue method columns all the elements N times to see the source code: copy the code var queue = jQuery. queue (elem, type), startLength = queue. length, fn = queue. shift (), hooks = jQuery. _ queueHooks (elem, type), next = function () {jQuery. dequeue (elem, type) ;}; The system code knows the principle. This is very simple. get all the data in the queue through queue get, judge the length, and then extract the first one, then perform a preprocessing to generate the next. Is there a hooks here? Carefully analyze the internal queueHooks replication code _ 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 () {data_priv.remove (elem, [type + "queue", key]) ;});} copy the code. We can say that dequeue is not only extracted but also executed. During execution, the next and hooks are passed to the external callback, which is the logic of js, you can pass a reference internally, and provide external calls or execute fn. call (elem, next, hooks) With our code, we can copy the code var body =$ ('body'); function cb1 (next, hoost) {console. log (11111) next () // executed cb2 // 22222} function cb2 () {console. log (22222)} // set $. queue (body, 'A', cb1); // The third parameter is function $. queue (body, 'A', cb2); $. dequeue (body, 'A') copies the code. next, it still calls $. dequeue, so that the next callback $ in the queue can be executed. hooks in dequeue is the final cleanup after all callback in the queue is executed (startLength is 0 at this time). if (! StartLength & hooks) {hooks. empty. fire ();} the hook is actually jQuery. callbacks object can be used to implement a collector function. When and when the analysis starts in the animation