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 - stackoverflow.com/questions/1058158/…

painotpi
– painotpi

2012-06-01 09:14:39 +00:00
Commented Jun 1, 2012 at 9:14 — painotpi
– painotpi, Commented Jun 1, 2012 at 9:14

iddo · Accepted Answer · 2012-06-01 12:17:27Z

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 1, 2012 at 12:17

answered Jun 1, 2012 at 9:10

iddo

7493 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gilzero Over a year ago

thanks for answering, but hard to understand, do you have an example?

Scott Rippey Over a year ago

@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?

iddo Over a year ago

@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).

Scott Rippey Over a year ago

@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.

iddo Over a year ago

@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.

|

Scott Rippey · Accepted Answer · 2012-06-20 20:12:41Z

0

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(...);
}

answered Jun 20, 2012 at 20:12

Scott Rippey

15.8k5 gold badges73 silver badges88 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related