jQuery. How is queue() different from using callback function for something is done?

Question

html:

<span>hello world!</span>

js: (using callback)

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow', function() {
    // callback after fontsize increased
    $(this).text(  $(this).text() + ' rolled! ' );
  });
});

So that every time SPAN is click, text 'rolled' appended after font size increased, instead of happening together.

And it can be done by using queue() as well like this:

js: (using queue())

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow'})
  .queue(function() {
    $(this).text(  $(this).text() + ' rolled! ' );
  });
});

I am not sure what is the difference between them. both do the same thing.

Why is queue() better/prefer than using callback, (or why is not ) ? What is special about queue()?

Thanks.

check this thread - http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me — painotpi, Jun 01 '12 at 09:14

iddo · Accepted Answer · 2012-06-01T12:17:27.117

1

You can put more events (which you specifie else in your code) in the same queue as your animation is put in.

So the callback will be executed immediately after your animation is ready, but in case of using queue() there may be other events in the queue that will be executed first.

The advantage of this behaviour is that no concurrent events (slide up and slide down for example) will be executed at the same time, which would give weird things.

Example:

$('div').click(function() {
  $(this).animate({
    color: 'green'
  }, 'slow'})
  .queue(function() {
    $(this).text( ' got colored! ' );
  });
});

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow'})
  .queue(function() {
    $(this).text(  ' got bigger! ' );
  });
});

If you first click the div and immediately after that the span, now you can be sure that the queue of the div will be executed first, and that when it's ready, the queue of the span will be executed.

In case of a callback, the one belonging to the animation that is ready first, will be executed first. And if they would be ready at the same time, the would both be executed at the same time. Which would result in, in this case, not seeing either the 'got colored!' text or the 'got bigger!' text.

edited Jun 01 '12 at 12:17

answered Jun 01 '12 at 09:10

iddo

749
3
11

thanks for answering, but hard to understand, do you have an example? – gilzero Jun 01 '12 at 09:17
1

@tangelo I don't understand this answer at all. The example does not match your description. Can you explain how the "div" animation is related to the "span" animation? – Scott Rippey Jun 18 '12 at 01:24
@Scott Rippey: You're right, the example doesnt completely match the description. In the example I also wanted to demonstrate that animations on different objects, will end up in the same queue (unless you specify a different queue name). – iddo Jun 18 '12 at 08:46
@tangelo If I understand correctly, when you click the "div", and then immediately click the "span", they will both animate simultaneously. The "span" will not wait until "div" animations have completed, because they're on 2 completely different queues. – Scott Rippey Jun 18 '12 at 19:39
@Scott Rippey: No, they will end up in the **same queue**. So the one on span will **wait** for the one on div to be finished. – iddo Jun 19 '12 at 09:35
@tangelo The `span` definitely doesn't wait for the `div` to finish. They run concurrently. http://jsfiddle.net/Kt9mL/ – Scott Rippey Jun 20 '12 at 20:02

score 0 · Answer 2 · answered Jun 20 '12 at 20:12

Using the callback parameter is exactly the same as using the .queue(callback) method.
When you supply a callback to any animation, it just queues the callback the same way as .queue.

.queue(callback) is just another way to add a callback separately from your animation.
There's perfectly valid reasons to do so:

$(this).animate(...);
if (shouldDoCallback) {
    $(this).queue(...);
}

jQuery. How is queue() different from using callback function for something is done?

2 Answers2