Question

I have read lots of pages (also on stackoverflow) on how to fix this issue but nothing works for me. Below is the code I currently have:

    var initialFadeIn = 1000;           //initial fade-in time (in milliseconds)
    var itemInterval = 5000;            //interval between items (in milliseconds)
    var fadeTime = 2500;                    //cross-fade time (in milliseconds)

    var infiniteLoop = setTimeout(function(){
            position1.eq(currentItem1).stop(true, true).fadeOut(fadeTime);
            if(currentItem1 == numberOfItems1 -1) {currentItem1 = 0;}else{currentItem1++;}
            position1.eq(currentItem1).stop(true, true).fadeIn(fadeTime);
    }, itemInterval);

I added the .stop(true, true) but is still builds the animations and then displays all at once.

I also tried:

  infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1);    

function infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1) {
        setTimeout(function() {
                position1.eq(currentItem1).stop(true, false).fadeOut(fadeTime);
                if (currentItem1 == numberOfItems1 - 1) {
                        currentItem1 = 0;
                } else {
                        currentItem1++;
                }
                position1.eq(currentItem1).stop(true, false).fadeIn(fadeTime, infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1));
        }, itemInterval);
}

but its just the same.

I was able to link it to window .focus()/.blur() but I would prefer it to stop of keep running in the background – eg: someone is using skype with the page in the background.

Any ideas I should try?

thankyou

Answer 1

This line of code is not right:

position1.eq(currentItem1).stop(true, false).fadeIn(fadeTime, infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1));

You are supposed to be passing a function as the last argument to fadeIn() and that function will be called when the fadeIn() finishes. That is not what this line of code does. This line of code executes the infiniteLoop function at the beginning of the fadeIn() because you’re calling it right in the argument list and then passes the return value from that function to the fadeIn() function. This will indeed cause an infinite loop.

Instead, you should be calling it like this:

position1.eq(currentItem1).stop(true, false).fadeIn(fadeTime, function() {
    infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1)
});

This passes an actual function to the fadeIn() call and that function will be called later when the fadeIn actually completes.

The rest of your question sounds like maybe you’re trying to deal with the problem where Chrome and Firefox slow down timers when a tab goes to the background and then speed them up almost in a catchup mode when it comes to the foreground, there are solutions. I’m not sure exactly what kind of solution you want as you haven’t really explained that.

The best solution is usually to stop your animations entirely when the tab goes to the background. Chrome offers an experimental page visibility API to allow you to do that. It’s a new event that you can listen to that tells you when the page becomes non-visible and when it becomes visible again and you can start/stop any long running timers upon those events.

Here’s some sample code for using that API from the doc page:

//startSimulation and pauseSimulation defined elsewhere

function handleVisibilityChange() {
  if (document.webkitHidden) {
    pauseSimulation();
  } else {
    startSimulation();
  }
}

document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false);

Using .stop(true, true) will clear the animation queue and advance to the end of the animation for a given object before running the next animation, but isn’t really a fix for the general tab visibility/timer slowdown issue. The only real fix is to stop running the timers/animations in the background tabs.

As a work-around in other browsers, some people keep track of when the focus leaves your window because that also happens when a tab goes to the background, though it’s imperfect because the window can still be visible, but in another browser window when it loses focus. Imperfect, but perhaps better than nothing.

If you’re really asking something else, then please clarify exactly what your question is. You’ve posted a bunch of code, but not been real clear about what your question is.