Experimenting With jQuery's Queue() And Dequeue() Methods

It's especially useful when have a series of asynchronous method calls that you want to execute serially, and don't want to maintain a chain of callbacks.

Say you want to execute first_async_action() followed by second_async_action(), followed by third_async_action(). You could do this:

<pre>
first_async_action(function(){
second_async_action(function(){
third_async_action(function(){
alert( 'done!' );
});
});
});
</pre>

Or if that looks messy (which it does) you could try something like this:

<pre>
function start(){
first_async_action( exec_second_async_action );
};

function exec_second_async_action(){
second_async_action( exec_third_async_action );
};

function exec_third_async_action(){
third_async_action( all_done );
};

function all_done(){
alert( 'done!' );
};
</pre>

start();

But what if you decide you need to execute third_async_action before second_async_action? either way, it's messy.

A good, flexibile, solution would be to do this kind of thing:

<pre>
function next(){
var action = actions[ idx++ ];
action && action();
};

var idx = 0,
actions = [
function(){
first_async_action( next );
},
function(){
second_async_action( next );
},
function(){
third_async_action( next );
},
function(){
alert( 'done!' );
}
];

next();
</pre>

Which is pretty much what jQuery's queuing methods do, internally.

Man, I wish there was comment code syntax highlighting.

@Ben, I like SyntaxHighlighter personally.. you can see it in my site's comments, plugin code examples, etc. Easy to use and flexible.

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Regarding the queueing stuff, I actually wrote a plugin to manage queues, but it works a bit differently than jQuery's built in queue methods. You don't use it specifically on jQuery objects, for example.

http://benalman.com/projects/jquery-message-queuing-plugin/

Still, it really makes a lot of sense to use a managed queue internally for all these animation methods, because it eliminates the whole "ridiculous nested callback" scenario.. and of course, because the queue manager is iterating over an array of queued items, it's trivial to skip a queue item or stop the queue at any time.

BTW, here's my code as a gist for easier viewing:
http://gist.github.com/319568

@Ben and @Cowboy, thanks for sharing this info. I'm fairly new to jQuery. Thus far I have only really used it for dynamic drop down population, but I would like to branch out into using more of it.

@Cowboy,
Could you please explain the code you written?
I was trying to follow your example, but failed (( Here is my code. Probably you could tell me where I got something wrong
Thanks!

$('.child').bind('click', function(){
var $anchor = $(this);
function next(){
var action = actions[ idx++ ];
action && action();
};

var idx = 0,
actions = [
function(){
$(function (next) {$anchor.hide('fast');});
},
function(){
$(function (next) {$anchor.show('fast');});
},
function(){
$(function (next) {$anchor.hide('fast');});
},
function(){
alert( 'done!' );
}
];

next();

});

@tylik, it might be more helpful if you fork my gist on GitHub and ask your question there, so that we get the benefit of syntax highlighting, indenting, comments and revisions.

http://gist.github.com/319568

Brilliant example! Though its a very simple example, I used the concept for a complicated Ajax system which had multiple steps that should be executed serially reporting the status of each step to the DOM. Amazing and a big thanks to you and your great highlights.

Great information

Hello Ben,

This is just awesome, clear and easy to follow.

It helped me in a project I am doing,

Your site has become an authority on Ajax coding,

2 Thumbs up from me :)

Many Thanks,
Nader.

Excellent explanation, thanks for the post. I have only one question, how do i get to the last effect in queue without execute others effect.

Hi,

I have read lots of your tutorials, but i have never thanks you.
once more your explanation is very helpful and even for non english speaker it's very easy to understand.

I hope you will continue like this !

This is what i wanted about jquery queue, explained in a super simple manner. Thanks for sharing..

I just want to say that this post saved me!! I'm developing a blackjack game. I wanted the cards and scores to animate in the right order based on certain conditions (blackjack, bust, etc.).

To do this I was maintaining a complex and unreadable labrynth of callback functions.

Thanks to this simple little example, I fully understand how to manipulate the queue for separate elements and actions anywhere in my code.

I needed to queue some code recursively until a condition changed that was managed outside. Work wanted me to use the queue method rather than setInterval (no, I really don't know or care why). Had trouble, but got it figured out. Here is what worked for me (simple example) in case anyone else could use it.

 
counter = 0;
queueStarted = false;
$logo = $(".logo")
$logo.on("click", function(){
test()
if (!queueStarted ){
queueStarted = true;
$logo.dequeue("ma-carousel-scroll")
}
})
test = function () {
$logo
.queue("ma-carousel-scroll", function(next){
$logo.html(counter++);
next();
$logo.trigger("click");
})
.delay(1500, "ma-carousel-scroll");
}

Feel free to tell me if you see a more efficient way to achieve what I'm doing too.