- JQUERY provides QUEUE facility to line up functions for a DOM element.It's main purpose to maintain a series of functions applied to a element.
- Benefits of Queue:-
-------Provides dynamic removal of function to a Queue.
-------Does not hamper the main program execution as It operates Asynchronously.
- In this Demo, "We will create a queue(seriese of functions) and apply to a DIV DOM element.Also we will create another dynamic queue".
- The markup HTML is present in jqplot-demo.html,
<html> <head> <title>JQUERY Queue Use Demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="queue-jquery-script.js"></script> </head> <body> <div id="tutorialsavvy">TutorialSavvy</div> </body> </html>
- The javascript code is present in queue-jquery-script.js,
var TUTORIAL_SAVVY={
/*Counter for calculate the no of execution*/
COUNT :0,
/*Seriese of functions to be execxuted*/
animateTutorialSavvy : function(){
var nodeElement = $("#tutorialsavvy");
$(nodeElement).animate({"font-size":+30},2000);
console.log(TUTORIAL_SAVVY.calculateNoofQueue());
$(nodeElement).hide();
console.log(TUTORIAL_SAVVY.calculateNoofQueue());
$(nodeElement).show();
console.log(TUTORIAL_SAVVY.calculateNoofQueue());
$(nodeElement).slideUp("normal");
$(nodeElement).slideDown("normal",TUTORIAL_SAVVY.animateTutorialSavvy);
console.log(TUTORIAL_SAVVY.calculateNoofQueue());
TUTORIAL_SAVVY.COUNT++;
console.log(TUTORIAL_SAVVY.COUNT === 3);
/*Chehcks the count if 3, it stops the previous queue and creates new One*/
if(TUTORIAL_SAVVY.COUNT === 3){
$.queue( $("#tutorialsavvy")[0], "fx", [] );
$("#tutorialsavvy").stop();
TUTORIAL_SAVVY.createAnewQueue();
}
},
/*Creates a new Queue for the element*/
createAnewQueue : function(){
$.queue( $("#tutorialsavvy")[0], "fx", function () {
$(this).css("color", 'red');
$.dequeue( this );
});
},
/*Calculates the Queue lenght a present point of time*/
calculateNoofQueue : function(){
var noofQueue = $.queue( $("#tutorialsavvy")[0], "fx");
return "Queue Length :"+noofQueue.length;
}
};
$(document).ready(function(){
TUTORIAL_SAVVY.animateTutorialSavvy($("#tutorialsavvy"));
});
- The firebug debug console output,
- The Browser output will look like,
