queue(), dequeue() and clearQueue()

Queues form the cornerstone of all animations within jQuery, providing the framework for executing a sequence of functions asynchronously on an element. These versatile structures can be utilized for various purposes, stored as arrays of functions on an element using jQuery's data() method. Operating on a First-In-First-Out (FIFO) principle, queues underscore the ordered execution of functions, lending a crucial dimension to the orchestration of animations and interactions.

example
div.animate({height: 300,width: 300}, "slow"); div.animate({height: 150,width: 150}, "slow"); div.fadeOut("slow"); div.fadeIn("slow");

Introducing functions to the queue is achieved through the use of .queue(), while the removal of functions is accomplished by invoking .dequeue(). When employing consecutive animate() method calls, jQuery assembles an 'internal' queue to which these method calls are appended. Subsequently, these queued animate calls are systematically executed one after the other, reinforcing a seamless progression of animations.

example
run this source code Browser View

The queue length is :

jQuery queue()
Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnAnimate").click(function(){ var div = $("div"); div.animate({height: 300,width: 300}, "slow"); div.animate({height: 150,width: 150}, "slow"); div.fadeOut("slow"); div.fadeIn("slow"); $("p").text("The queue length is : " + div.queue().length); }); }); </script> </head> <body> <button id="btnAnimate">Start Animation</button> <p></p> <div style="height: 100; width:100;background: red;width:10%;position:absolute;"> jQuery queue() </div> </body> </html>

Retrieving/Setting the queue

A jQuery queue can be accessed by invoking .queue() without specifying a function argument. This method is handy for gauging the queue's item count. The queue itself can be modified using methods like push, pop, unshift, and shift. Moreover, the entirety of the queue can be substituted by providing an array as an argument to the .queue() function, thereby facilitating versatile queue management.

example
// lets assume $elem is a jQuery object that points to some element we are animating. var queue = $elem.queue(); // remove the last function from the animation queue. var lastFunc = queue.pop(); // insert it at the beginning: queue.unshift(lastFunc); // replace queue with the first three items in the queue $elem.queue(queue.slice(0,3));

jQuery dequeue()

jQuery lacks inherent awareness of the functionality within queue items. Consequently, it necessitates explicit instruction from developers to advance to the subsequent item in the queue. This is accomplished through the dequeue() method, which, when employed, prompts the execution of the function at the forefront of the queue. Within a queue, several functions await execution, and invoking dequeue() removes the foremost function, allowing it to run. This precise mechanism ensures the systematic execution of queued functions, streamlining the animation or action flow.

div.animate({height: 300,width: 300}, "slow"); div.animate({height: 150,width: 150}, "slow"); div.queue(function () { div.css("background-color", "green"); div.dequeue(); });

To establish the smooth progression of processes, it's imperative to ensure that the dequeue() method is invoked solely subsequent to adding a function using the queue() method. When dequeue() is called without any argument, it functions to eliminate functions from the standard effects queue. This careful coordination guarantees the systematic execution of queued functions, bolstering the efficiency and predictability of the animation or action sequence.

run this source code Browser View

The queue length is :

jQuery dequeue()
Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnAnimate").click(function(){ var div = $("div"); div.animate({height: 300,width: 300}, "slow"); div.animate({height: 150,width: 150}, "slow"); div.queue(function () { div.css("background-color", "green"); div.dequeue(); }); div.fadeOut("slow"); div.fadeIn("slow"); $("p").text("The queue length is : " + div.queue().length); }); }); </script> </head> <body> <button id="btnAnimate">Start Animation</button> <p></p> <div style="height: 100; width:100;background: red;width:10%;position:absolute;"> jQuery dequeue() </div> </body> </html>

jQury clearQueue()

When the .clearQueue() method is called, any functions present in the queue that have not yet been executed are effectively purged. It's important to note that ongoing animations, if any, remain unaffected. However, any queued items awaiting execution will be discarded. When utilized without an argument, .clearQueue() acts to eliminate outstanding functions from the standard effects queue, often referred to as 'fx'. This method proves valuable in streamlining and managing the execution of functions within jQuery's animation framework.

run this source code Browser View


jQuery dequeue()
Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnStart").click(function(){ var div = $("div"); div.animate({height: 600,width: 800}, 2000); div.animate({height: 150,width: 200}, 2000); }); $("#btnStop").click(function(){ var div = $("div"); div.clearQueue(); }); }); </script> </head> <body> <button id="btnStart">Start Animation</button> <button id="btnStop">Stop Animation</button> <div style="height:150;width:200;background:green;position:absolute;"> jQuery dequeue() </div> </body> </html>

In this way dequeue() shares a resemblance with .stop(true). However, while the primary purpose of the .stop() method is to exclusively manage animations, the utility of .clearQueue() extends beyond animations. It can effectively remove any function incorporated into a general jQuery queue using the .queue() method, offering a broader range of control over queued functions beyond animations.

Conclusion

The trio of jQuery methods—queue(), dequeue(), and clearQueue()—constitute a fundamental mechanism for orchestrating asynchronous execution of functions on elements. Through queue(), functions are systematically added to the queue for later execution. Dequeue() then advances the queue, executing functions in sequence, while clearQueue() discards unexecuted functions. These methods are vital tools for precise control over animation sequences and function execution within jQuery's framework.






Related Topics
  1. Show and Hide Effect in jQuery
  2. Fade effect in jquery
  3. Sliding Effect in jquery
  4. jQuery Effect animate() Method
  1. jQuery Stop() finish()
  2. jQuery Callback Function
  3. jQuery Shake Effect