1

You can see whats happening here.. http://jsfiddle.net/gregguida/36SEZ/4/

Switch tabs for about 30 seconds and then come back, the animation gets totally out of hand.

I think this has something to do with the way the browser treats setInteval() when the window doesn't have focus but I'm not sure if that's the case. I also don't know what to do about it. Any insight is appreciated.

Update: also tried using setTimeout instead of setInterval but I'm experiancing similar results

Thanks!

Greg Guida
  • 7,302
  • 4
  • 30
  • 40
  • 2
    See the following for Chrome's `setInterval` suspension: http://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome and http://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs – Digital Plane Aug 18 '11 at 15:19
  • 1
    Thank you! I knew I had seen this issue somewhere before just couldn't find it =) – Greg Guida Aug 18 '11 at 15:22
  • It seems to be chrome-only as in Opera it works... And... aren't you copying facebook a bit? ^_~ – MrRap Aug 18 '11 at 15:23
  • @MrRap Actually, I think Firefox added this feature recently too... – Digital Plane Aug 18 '11 at 15:25
  • @Digital Plane If so, Greg Guida should not use it in a web-app/site because there would be nothing that would make a hype and it would lower his site's quality in people's eyes... – MrRap Aug 18 '11 at 15:34
  • @MrRap Sorry, I meant the `setInterval` suspension. – Digital Plane Aug 18 '11 at 15:35
  • @Digital Plane Oh :D. But my comment is still valid considering facebook's popularity... – MrRap Aug 18 '11 at 15:39
  • It's just a proof of concept either way, but consider how many sites use the same spinner animation. I don't think the similarity is that big of a deal. – Greg Guida Aug 18 '11 at 15:48

2 Answers2

4

I ran into the same when creating an animation for my site. The way I got around it was by removing the call to setInterval and setting a new timeout each time the animation is completed.

Here is your code updated to use that approach: http://jsfiddle.net/36SEZ/5/

Note that the call to setTimeout should be called only once after all of the animation is finished. In order to make sure that happens I've put it in the complete function of the last animation on the last div.

Curtis Maddalozzo
  • 303
  • 2
  • 5
2

You should read the second note at http://api.jquery.com/animate/#notes-0

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55