0

I am using setInterval(foo,ms) to carry out an animation. I really don't want to post all the code for the animation here as it spans multiple files. It's basically a bunch of images falling. Every second I call ctx.drawImage(img,...) while updating the coordinates to simulate gravity.

I have divided the canvas into two sections, one animation on the left and one on the right. When one of them is activated the frame rate is stable at 30 fps. If, however, I activate both of them, the performance plummets. This has nothing to do with overloading my computer, as I can cut the complexity of each animation by a factor of 10 and the problem persists. My guess is the setIntervals are interfering with each other.

My question is whether it is safe to execute more than one setInterval calls. Thanks

puk
  • 16,318
  • 29
  • 119
  • 199
  • Just a stab in the dark, but make sure the callback of setInterval() does not call setInterval() itself. That sort of thing happens to me all the time – Greg Guida Jun 21 '11 at 22:44
  • @Greg- Even though I migrated from setTimeout to setInterval I am sure that is not the case here --checks anyways-- definitely not the case. – puk Jun 22 '11 at 00:38

5 Answers5

1

You can have many setIntervals() without issue but be aware that JS is fundamentally single-threaded (per-page). Multiple "Concurrent" threads are actually handled by jumping one thread about the code.

What this means is that timing won't be consistent - especially if one of the methods takes a considerable length of time to run.

Basic
  • 26,321
  • 24
  • 115
  • 201
1

As the others say, you can have as much as possible. Nevertheless, you should have as few as necessary for good performance. Maybe you can find a way to use only one intervala for both animations.

There might be a problem though if you use global variables. This could have an influence on the animations (maybe even on the performance, depends on what you use them for).

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
1

I would advise using setTimeout it could avoid performance issuse.

Take a look at this question setTimeout or setInterval?

It does a great Job of explaining the difference between the two and why you should you generally use setTimeout.

Community
  • 1
  • 1
Lime
  • 13,400
  • 11
  • 56
  • 88
  • LOL, I loved the jab at IE at the end. Good link. I switched to setInterval b/c I was having trouble cancelling the setTimeout chained animations, and I was worried about timing issues. ie. if I want execution every 100 ms and execution of my code (hypothetically) takes 50 ms, then the code will get executed every 150 ms with setTimeout – puk Jun 22 '11 at 00:43
  • @puk just re: your last point, you could use `setTimeout()` at the start of your method, then it would run every 101-ish ms irrespective of how long your code takes. Still not perfect but far better :) – Basic Jun 23 '11 at 09:45
0

My question is whether it is safe to execute more than one setInterval calls

Short answer: yes, absolutely.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
0

Yes its safe to have multiple setIntervals running.. There's no underlying performance issue with using setIntervals.. profile your own code, you'll almost certainly find the problem there.

Duncan_m
  • 2,526
  • 2
  • 21
  • 19
  • I'll debug it, but I despise debugging features like these (or Image related issues) b/c problems manifest themselves at a later time. – puk Jun 22 '11 at 00:39