0

I have a series of functions that pulsate with a certain timing in mind in this fiddle

http://jsfiddle.net/upBdw/8/

When you run it, you can see that it goes from top, to middle to bottom. Open another window and try surfing to a different web page for a few seconds while the fiddle is open in another window. When you return to the fiddle, you will see the timing has changed. What is causing this? I cannot for the life of me figure out what is going on.

The code for the pulse can be found here

function fadeItIn() {

  window.setInterval(function(){

    // Fade Ins
    $('#child4,#child4C').fadeIn(175);
    setTimeout(function () {
        $('#child3,#child3C').fadeIn(175);
    }, 175);
    setTimeout(function () {
        $('#child2,#child2C').fadeIn(175);
    }, 350);
    setTimeout(function () {
        $('#child1,#child1C').fadeIn(175);
    }, 525);
    setTimeout(function () {
        $('#child,#childC').fadeIn(175);
    }, 700);

    // Fade Outs
    setTimeout(function () {
        $('#child,#childC').fadeOut(175);
    }, 875);
    setTimeout(function () {
        $('#child1,#child1C').fadeOut(175);
    }, 1050);
    setTimeout(function () {
        $('#child2,#child2C').fadeOut(175);
    }, 1225);
    setTimeout(function () {
        $('#child3,#child3C').fadeOut(175);
    }, 1400);
    setTimeout(function () {
        $('#child4,#child4C').fadeOut(175);
    }, 1575);  

  }, 3000);    


};
YeahMKD
  • 415
  • 1
  • 6
  • 22
  • Are you using Chrome? There's a bunch of questions asked about setTimeout/setInterval behavior in inactive tabs. This one for example: http://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome – j.koch Aug 20 '13 at 11:36
  • I am using chrome yes. Oh I wasn't even aware that there was an actual topic on this. I was hoping there was. Thanks Ill read up on it. – YeahMKD Aug 20 '13 at 11:38

1 Answers1

0

The problem arises because setTimeOut function does not work when the tab is not active. Try using a callback from your last animation to trigger another one.

speci
  • 147
  • 3
  • 6
  • 13
  • I see that its possible to pause a setTimeout when in an inactive tab, but I have a few questions regarding it. If I pause one that wraps lets say 10 other setTimeouts. Would that 1 parent setTimout also pause the other child ones? – YeahMKD Aug 20 '13 at 12:11
  • Yes, it will. By the way, you can also use .queue() (which is a jQuery function) to set the sequence in which the events should fire. – speci Aug 20 '13 at 14:19