setInterval 0 does not work in IE8

Question

I have a method changeColor that updates the CSS on some elements in my HTML. I also have a timer that controls this being applied i.e:

var timer = setInterval(changeColor,0);

The problem i'm facing is using that time interval of 0 results in the changeColor method not being run, however if i change it something minimal like:

var timer = setInterval(changeCalendarColor,1);

it works.

Now i'd be happy to use this however in IE8 this causes a slight delay in the colors appearing.

Any ideas on how to resolve this?

Thanks.

What did you expect to happen when you set the time of 0 for an interval? — Huangism, Jul 16 '14 at 15:27
Your first example is `changeColor`, your second is `changeCalendarColor`. Is that a typo? Or are you actually calling two different methods? If the later, how do you know `changeColor` would work if the delay was non-zero? — Matt Burland, Jul 16 '14 at 15:29
@MattBurland see http://stackoverflow.com/questions/7648557/setinterval-behaviour-with-0-milliseconds-in-javascript — Huangism, Jul 16 '14 at 15:31
@Huangism I'm hoping that the CSS styling would appear straight away — userMod2, Jul 16 '14 at 15:32
@Satpal yes I'm aware but if i use 0 the styling does not appear at all — userMod2, Jul 16 '14 at 15:32
@userMod2 are you getting a js error when you use 0? Seems fine here http://jsfiddle.net/Rk4pj/ — Huangism, Jul 16 '14 at 15:36
@Huangism no error and that fiddle works fine in FIrefox, but cannot load in IE8. — userMod2, Jul 16 '14 at 16:01

score 2 · Accepted Answer · edited May 23 '17 at 12:29

The setInterval function takes a function to call and a delay in milliseconds. You cannot have a delay of 0 milliseconds; there is a minimum delay in place (which according to the specs is 4ms). Take a look at the documentation for more.

// To call a function every second:
var timer = setInterval(myFunction, 1000); 

// This doesn't throw an error as the 0 is being overridden by a default minimum:
var timer = setInterval(myFunction, 0);

If you want to call the function initially and ALSO every second after that, you should call the function when you set the interval:

var timer = setInterval(myFunction, 1000); 
myFunction();

Here's what the Mozilla docs say about the minimum delay:

"In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the minimum timeout value for nested timeouts was 10 ms."

Regarding the slowness on IE8, the setInterval "lag" is probably being caused by IE8 being too slow to keep up with what the function is trying to do. At each time interval, the function is called, but IE8 is queue is being overloaded as a result -- to the point that IE8 can't keep up. Increasing the delay would mask this issue I'd imagine.

As Vasile says on this Google Code forum:

"When a new call is triggered if the previous call is not ended then the new call is queued and will wait for it's time to be executed; and here is the problem... (the timer will slow down when the queue will grow and the performance will go down over time)"

Note that this is a common problem for low delays in IE8; check this post for more on this specific issue.

Also, a quick point to note about setInterval delays is that inactive tabs are occasionally treated differently:

"In (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs..."

See this related SO post for more.

And it doesn't take a callback, it takes code or a function. — j08691, Jul 16 '14 at 15:32
Ahh, thanks for the catch j08691! And Matt, I believe there IS in fact a minimum delay (see the reference I posted). — Casey Falk, Jul 16 '14 at 15:34
Those saying that a delay of 0 "works" in the sense that it doesn't throw an error; sure, it does. **BUT** the 0 is being overridden by the minimum delay (see updated answer for clarification). — Casey Falk, Jul 16 '14 at 15:38
Probably an off-topic comment, but I would say that if a function doesn't behave as you would expect it to, then that is an error (user-error or code-error, haha). Likewise, if you assume that setting the delay to 0 is *actually* setting the timeout as low as it can go (but not 0 -- since conceptually that makes no sense), then sure I guess it isn't an error. It is important to note the distinction though: **a timeout of 0 is not actually a timeout of 0 milliseconds.** — Casey Falk, Jul 16 '14 at 15:58
Oh, derp. Updated to include that point. Thanks for the reminder, @Huangism. — Casey Falk, Jul 16 '14 at 17:00

setInterval 0 does not work in IE8

1 Answers1