jQuery source code analysis notes (7) Queue_jquery

Each Element can have multiple queues, but basically only one is used, which is the default fn queue. Queues allow a series of functions to be called asynchronously without blocking the program. For example: $("#foo").slideUp().fadeIn(); In fact, this is a chain call commonly used by all of us. In fact, this is a Queue. Therefore, queues are similar to Deferreds and are an internal infrastructure. When slideUp is running, fadeIn is placed in the fx queue. When slideUp is completed, it is taken out of the queue and run. The queue function allows direct manipulation of the behavior of this chain of calls. At the same time, queue can specify the queue name to obtain other capabilities, not limited to the fx queue.

Copy code The code is as follows:

// General usage:
$("# foo").slideUp(function() {
alert("Animation complete.");
});
// Equivalent to:
$("#foo").slideUp() ; // Does not provide a callback, just triggers the event
$("#foo").queue(function() { // Add the callback function
alert("Animation complete.");
$( this).dequeue(); // Must be taken out of the queue, then the next function in the queue has a chance to be called
});

queue internally uses data or JavaScript array API to save data. The push and shift operations on arrays are inherently a set of queue APIs. Data can be used to save any data.

Copy code The code is as follows:

queue: function(elem, type, data) {
if(elem) {
// The default is fn
type = (type || "fx") "queue";
// data internal API: data(element, key, value, pvt );
// Data is not passed in here for the sake of efficiency. If data is not passed in, it is just a get queue, so the following judgment is not needed
var q = jQuery.data(elem, type, undefined, true);
if(data) {
if (!q || jQuery.isArray(data)) {
q = jQuery.data(elem, type, jQuery.makeArray(data), true);
} else {
q.push(data ); // Push
}
}
return q || [];
}
}
dequeue: function(elem, type) { type = type || " fx"; // Get this queue var queue = jQuery.queue(elem, type), // Dequeue an element fn = queue.shift(), defer;
// "inprogress" sentry
if( fn === "inprogress") {
fn = queue.shift();
}
if(fn) {
// Add a sentry to prevent automatic dequeueing
if( type === "fx") {
queue.unshift("inprogress");
}
// Execute
fn.call(elem, function() {
jQuery.dequeue (elem, type);
});
}
if(!queue.length) {
jQuery.removeData(elem, type "queue", true);
handleQueueMarkDefer(elem , type, "queue");
}
}