How to use "queue" or "deferred" in what condition? What are their designing purpose?

Question

I am confused,is "queue" for animations and deferred for "ajax"? Could someone tell me some typical examples?

Answer 1

You're mostly correct.

"deferred objects" can be used for processing asynchronous events - you initiate an action and then register a callback which will be invoked when the action has completed. This includes AJAX, although there are plenty of other uses too.

jQuery queues are indeed primarily used to maintain a queue of (animation) functions to be called in sequence, and .queue() specifically is used to add your own function into an animation queue.

To further complicate matters animations can also trigger asynchronous callbacks when they complete. The "traditional" way of doing this was to supply a callback to the animation function, but with modern jQuery if you call .promise() on a jQuery object you get a deferred object which will be resolved when any existing animations on every element within that object are completed:

$('#id1,#id2').slideUp().promise().done(function() {
    // this will be called when the animations are complete
});