Why does my setTimeout speed up when I have multiple tabs open to my site?

Question

I have a timer that counts down every second. It works great until the user opens up 3 or 4 tabs of the my site, at which point the newest tab's timer goes double or triple speed. I can currently only reproduce the bug in IE8. I was previously using setInterval, and could reproduce the bug in Firefox as well.

I'm actually using FBJS (Facebook's Javascript), so I'll just give some pseudocode.

function countDown() {
  ...
  setTimeout(function() { countDown() }, 1000);    
}

countDown();

However, what I'm really looking for is more theoretical. I know browsers can try and play "catch up" with setInterval, but how can multiple tabs cause this behaviour for setTimeout?

Answer 1

That whole situation is very odd. The only scenario that's coming to mind where it makes any sense is one where the browser is trying to "smooth" the period of self-reinstating setTimeouts, same as for setInterval, and the code that's doing that actually confuses timers in different windows with each other.

I don't know if it's feasible, especially with Facebook involved, but an interesting test would be to give each instance a randomized name for the countDown function and see if that makes any difference, like:

<?php $timerTag = rand(1, 1000); ?>
function countDown<?php echo $timerTag ?>() {
  ...
  setTimeout(function() { countDown<? php echo $timerTag ?>() }, 1000);    
}

countDown<?php echo $timerTag ?>();

If this changes the observed behavior, that argues for the scenario I have in mind. (And possibly provides a way of addressing the problem.)