What does clearQueue in jQuery do?

Question

I was reading the code for AutoScroll plugin @ http://blog.insicdesigns.com/2010/08/an-ultra-lightweight-autoscroll-to-top-jquery-plugin/

There you will find

var t = jq('<div class="'+ops.styleClass+'"></div>')

then after some code

t.clearQueue().fadeOut(ops.hideDuration || 200);  

What do clearQueue is doing here ? Or simply what do clearQueuein jQuery does?

Answer 1

Description: Remove from the queue all items that have not yet been run.

http://api.jquery.com/clearQueue/

That call should be pretty equivalent to

t.stop(true,true).fadeOut(ops.hideDuration || 200);

The only difference here is that clearQueue will remove all functions from a (function) queue, whereas .stop() will only effect fx methods.

Answer 2

It clears the queue of function calls pending to execute, that is functions that have been invoked but have not yet executed at this point. Check this for more information:

http://api.jquery.com/clearQueue/

Answer 3

It's not part of the AutoScroll plugin, he is just using it from the jQuery API

Answer 4

It will cancel any queued items (usually animations) that have not yet run.

If there's a current animation (for example) taking place, it is not affected. But any queued items will not execute.

In this example, the height animation will continue, but the queued .fadeOut() will not occur.

Example: http://jsfiddle.net/sXnVj/

$('div')
    .animate({height: 500},1000)
    .fadeOut();

$('div').clearQueue();
​

Or take a situation where an item has been queued, but never dequeued. Any subsequent queued items will never execute, unless you clear the queue.

Here, the .fadeOut() will not happen:

$('div').queue(function() {});

$('div').fadeOut(2000);

But here it will:

$('div').queue(function() {});

$('div').clearQueue().fadeOut(2000);