How asynchronous is jquery and animations?

Question

I'm getting some unpredictable mishaps with my script and I'm beginning to think it might have something to do with the animation I use.

I have one element with the click() event attached that triggers an animation. Something like

$(el).click(function() {
  $(this).animate({some properies}, 500);
});

Let's say we extend this a little bit

$(el).click(function() {
  $(this).stop(true, true);
  fancyFunction(this);
  $(this).animate({some properies}, 500);
});

I have now added a call to fancyFunction and the important thing is that I stop ongoing animation on the object (in case I double click for example). Also for the record fancyFunction() MUST be sure that no animation is running on the element.

I think that this might be the problem I have. Can you rest assured that stop() is complete before next line is called, in this case fancyFunction(), or will fancyFunction fire immediately after stop() has started, but not necessarily completed? If it behaves like other functions in the animation categories I guess no.

If this might be the problem, what solutions do you have?

I'm not sure if this is related, but I did find a jQuery bug when testing if an object is :animated... read the bug report here: bugs.jquery.com/ticket/7157 — Mottie
– Mottie, Commented Dec 28, 2010 at 15:02

Nick Craver · Accepted Answer · 2010-12-28 14:27:47Z

2

.stop() is synchronous, no timeouts, etc...it will complete before the next statement. I think your problem most likely lies elsewhere, since what you have will kill all animations on that element.

answered Dec 28, 2010 at 14:27

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

Anders Over a year ago

Thank you Nick! I'll keep searching the code and try to rule possible problems out one at a time

chubbsondubs · Accepted Answer · 2010-12-28 14:28:55Z

0

Javascript is single threaded so there's no way another piece of code is executing while your javascript is executing. Even if the animations was still running the fact that your code is executing at this point means the animation can't be actually changing the object as your code is running. But, yes your stop call will stop the animation from running, and nothing is animating while fancyFunction is running.

Somethings you'll want to do before moving on. Does fancyFunction use timers or anything that could delay processing? If so consider not using timers or delays. I'm sure there is something you could do that doesn't involve timers.

answered Dec 28, 2010 at 14:28

chubbsondubs

39.4k25 gold badges110 silver badges143 bronze badges

3 Comments

Nick Craver Over a year ago

Be careful with that statement "Javascript is single threaded"...it's not entirely true. bobince has a great rundown here: stackoverflow.com/questions/2734025/…

chubbsondubs Over a year ago

Most of what he's saying is events can fire when you aren't expecting them too, but that's doesn't mean it's multi-threaded. It just means the thread that's inside javascript is still pumping events, and that's exactly what it should do. The thread invoking focus() could choose to immediate execute that command or it could delay by simple signaling an event on the event pump to be run later. That could explain events being "out of order". It's doesn't prove two threads are simultaneously running. If they were the authors of js would have a lot more problems to worry about.

Anders Over a year ago

Thank you for your answer. I'll look further for the porblem then. I gave the point to Nick since he was a few moments quicker. About multi threaded I guess you are correct. Even Though it runs in just one thread it seems like event's are stacked just like processes are in your OS given a short amounts of burst times until it's done. Running an animation for 30 seconds does not stop other instructions in the code and that was why I considered stop() to be a possible black sheep

Collectives™ on Stack Overflow

How asynchronous is jquery and animations?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related