Read jquery 21 (queue Queue)

The queue module is divided into effects in jquery. searching the entire library will find that queue is only used in effects. js of the special effect module. Jquery extracts an independent namespace to the queue, indicating that, in addition to using the internal effects module, the clientProgramMembers can make full use of their intelligence and use queue to build non-animated APIs.

The APIS opened by the queue module are

• $. Queue, $. dequeue, $. _ queuehooks mounted on $ (internal only)
• The jquery objects include queue, dequeue, delay, clearqueue, and promise.

 

According to jquery's Convention, the method of hanging on $ is a low-level API, which is often used when hanging on jquery objects.

Generally, a low-level API is an advanced API service, that is, $. queue is used in the queue, and $. dequeue is used in the dequeue. This is actually implemented as a queue where $. queue is the column and $. dequeue is the column.

 

I. $. Queue

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.

1. Set the specified queue

Function CB1 () {alert (1)} function CB2 () {alert (2)} var arr = [CB1, CB2]; $. queue (El, 'mx ', CB1); // The third parameter is function $. queue (El, 'xm ', arr); // The third parameter is an array.
 

 

2. You can obtain the stored callbacks.

 
VaR cbs1 = $. Queue (El, 'mx '); // [CB1] var cbs2 = $. Queue (El, 'xm'); // [CB1, CB2]
 

 

$. Queue uses the $. _ data method internally to save the data. The default type/queuename uses "FX" + queue. $. The implementation of queue is very simple,CodeHowever, there are 15 rows, namely the cache object queue. If there is no, It is initialized as an empty object, and data is saved. If there is, data is directly pushed to the array.

 

Ii. $. dequeue

Execute the callback function out of the column. Only one column is displayed for each call. Therefore, when there are n callbacks, you need to call the $. dequeue method N times before all the elements are listed. $. Dequeue the first parameter is the DOM element, and the second parameter is the queuename

Function ff1 () {console. log (1)} function ff2 () {console. log (2)} function ff3 () {console. log (3)} var P = $ ('P') [0]; $. queue (p, 'mx1 ', ff1); $. queue (p, 'mx1 ', ff2); $. queue (p, 'mx1 ', ff3); // calls every 2 seconds $. dequeue, output 1, 2, 3 setinterval (function () {$. dequeue (p, 'mx1 ')}, 2000 );
 

The context of the callback function is the DOM element, and the parameters are the next function and the hooks object.

 
VaR P = $ ('P') [0]; function func (next, hooks) {console. log (this); console. log (next); console. log (hooks);} $. queue (p, 'mx ', func); $. dequeue (p, 'mx '); // P, function, [object]
 

 

$. Dequeue is still called within next, so that the next Callback in the queue can be executed. $. Hooks in dequeue is the final cleanup after all callbackers in the queue are executed (startlength is 0 at this time,

 
If (! Startlength & hooks) {hooks. Empty. Fire ();}
 

Hooks. Empty is a jquery. Callbacks object, which is defined in $. _ queuehooks.

_ Queuehooks: function (ELEM, type) {var key = type + "queuehooks"; return jquery. _ data (ELEM, key) | jquery. _ data (ELEM, key, {empty: jquery. callbacks ("Once memory "). add (function () {jquery. _ removedata (ELEM, type + "queue"); jquery. _ removedata (ELEM, key );})});}
 

 

The above is all about queue. The essence is to use the push and shift of array to complete first in first out (first in first out), but there is a defect here, jquery's queue serves the effects module from 1.1, so all functions are stored in the queue. I personally think that if only the function is saved, we should make a strict type judgment on the Data parameter. If it is not a function, an exception is thrown. However, there is no strict judgment on the current version. If I do not store a function, an error will be reported during dequeue. As follows:

 
VaR P = $ ('P') [0]; $. queue (p, 'mx1 ', {}); // note that the third parameter is an object, not a function $. dequeue (p, 'mx1 '); // FN. call error, because FN is not a function
 

 

Iii. Queue

After learning about $. queue, queue is easy to understand. It is nothing more than calling $. Queue internally. Queue has the first parameter less than $. queue, and this is used internally to replace the first parameter.

Function ff1 () {console. log (1)} function ff2 () {console. log (2)} function ff3 () {console. log (3)} var $ P = $ ('P'); $ p. queue ('mx ', ff1); $ p. queue ('mx ', ff2); $ p. queue ('mx ', ff3 );
 

In this way, the three functions are listed, and the column name is "MX ". To retrieve a queue element, you only need to pass a column name such as "MX"

 
VaR queue = $ P. Queue ('mx '); // [ff1, ff2, ff3]
 

 

Another trick is to use the default queue "FX" of jquery to transmit data only.

 
Function ff1 () {console. log (1)} function ff2 () {console. log (2)} function ff3 () {console. log (3)} var $ P = $ ('P'); $ p. queue (ff1); $ p. queue (ff2); $ p. queue (ff3 );
 

In addition, when the default column name "FX" is used, it will call $. dequeue to execute the column. The source code is as follows:

 
If (type = "FX" & queue [0]! = "Inprogress") {jquery. dequeue (this, type );}
 

 

Iv. dequeue

Dequeue is called directly $. dequeue without any special processing. For details, see the source code.

 
Dequeue: function (type) {return this. Each (function () {jquery. dequeue (this, type );});},
 

 

V. Delay

Delay is used to delay the subsequent callback execution. The first parameter time is the delay time ("slow" and "fast" can also be used), and the second parameter is the queue name.

 
Function CB () {console. log (1) ;}var $ P =$ ('P'); $ p. delay (2000, 'mx '). queue ('mx ', CB); $ p. dequeue ('mx '); // output 1 in 2 seconds
 

If so

 
Function ff1 () {console. log (1)} function ff2 () {console. log (2)} var $ P = $ ('P'); $ p. queue ('mx ', ff1); $ p. delay (4000, 'mx '); $ p. queue ('mx ', ff2); $ p. dequeue ('mx '); // immediately output 1 $ p. dequeue ('mx '); // output 2 in 4 seconds
 

 

Vi. clearqueue

As the name suggests, all queues are cleared. The source code is as follows. An empty array is directly used to overwrite the previous array queue.

Clearqueue: function (type) {return this. Queue (type | "FX", []);},
 

VII. Promise

This method returns a promise object. The promise object is a castrated version of the previously mentioned deferred object. You can use done, fail, and progress to add, but it cannot be triggered. It has special significance in the queue module. For example, done indicates that done is added only after all functions in the queue are executed. For example

 
Function ff1 () {alert (1)} function ff2 () {alert (2)} function succ () {alert ('done ')} $ body = $ ('body') $ body. queue ('mx ', ff1); $ body. queue ('mx ', ff2); var promise = $ body. promise ('mx '); promise. done (succ); setinterval (function () {$ body. dequeue ('mx ') // first pop up 1, 2, and finally "done"}, 1500)
 

 

Note: The read version is 1.9.1.