Will setInterval cause browsers to hang?

Question

A couple years ago I was warned against using setInterval for long periods of time as it supposedly would cause the browser to hang if the called function ran longer than the designated interval, and would then not be able to catch up:

setInterval( function(){
  foo = 'bar_' + i++;
}, 1 );

Now, I'm aware that adding lots of code in a loop could cause the browser to hang anyway, and that blocking code like alert, prompt, and confirm will stop the code in it's tracks, but is there any good reason to avoid setInterval?

Note: I am aware of how to do recursive setTimeout calls (as that's what I've been using), this question is my trying to figure out if it's still worth using them, or whether setInterval can be used safely.

Answer 1

it always better to use setTimeout in a loop so you know exactly when to continue timing:

foo();
function foo(){

   setTimeout (function(){
      foo = 'bar_' + i++;
      foo();
     }, 1 );

} 

otherwise as you said above, the browser will have to catch up and since ur loop is in infinitum, it might not.

Answer 2

The reason setInterval is bad is because it will try to execute the code every X MS regardless of what's going on in the thread. So if you have:

setInterval( complexFunction, 1 ); // complexFunction takes >1 MS to complete

...you may end up with setInterval trying to re-execute several times before even its own code is complete! However, you can use setTimeout similarly and avoid this problem:

setTimeout( complexFunction, 1 );

function complexFunction() {
  // complex code
  setTimeout( complexFunction, 1 );
}

...now complexFunction will only call itself again once its own code is complete, so if its own code takes longer than 1 MS to complete you won't have any backlog to deal with like you would with setInterval