How to Use jQuery’s .queue() Method

jQuery's .queue() method is one that is actually an effect method. The .queue() method can be used to show the length of the queue for a particular selected element. The queue is the list of functions in line to be executed on a single selected element. So if you've got an element with five different functions attached to it, then the queue length would be five. The .queue() method used in conjunction with the .length() method is what you can use to calculate the queue length in your jQuery code.

The syntax for using the .queue() method is as follows:

$(selector).queue(queueName);

A good way to understand how exactly you can use the .queue() method is to see it in a real world context, so check out the example below to see how you would use the method to find the queue length on a p element when a button is clicked:

$("button").click(function(){
     $("span").text(p.queue().length)
})

So to understand what's going on in the snippet above, it helps to see some HTML:

<button>How many functions are attached to the paragraph below?</button>
<span></span>
<p>I have three functions in my queue.</p>

For the purposes of this tutorial, let's pretend that isn't way too much text to be in a button. In the jQuery code snippet above, when the button is clicked, text is dynamically added to the span tag through the .text() method that states the queue length of the p element. It's actually pretty straightforward. In this case, let's say the p tag has three functions in its queue, so what was once an empty span tag will say "3" once the button is clicked.

Sometimes (but rarely) elements have more than one queue attached to them. This is the only case in which you'd need to use the queueName parameter that the queue method takes. In this case, you'd write the name of the queue you'd like to find out the length of as the parameter, but again, this occurs very rarely.



Responsive Menu
Add more content here...