0

I have a code that cycle through 2 images.

fading out the first, changing image and then fading in the seconds image. i'm repeating the process with setInterval function.

when i'm watching the cycles, it looks fine. when i switch to another tab and return after 10 or 20 seconds, it's like trying to quickly catch up all the fadings and changes i missed ... (going crazy, in short)

here is the setInterval function:

setInterval(function(){
fadeout(PointerToImage, function() {
ChangeImage(function() {fadein(PointerToImage);   } )

});

},5000);

if needed: Fadeout function:

function fadeout(element,complete) { 
    var op = 1;  // initial opacity
    var timer = setInterval(function () {  //call the function every 50 milliseconds
        if (op <= 0.1){   // stop the function when the op is lower then x and then make in invisible.
                clearInterval(timer); // clear the timer ....
                     if ( typeof complete === 'function' ) // run  it only if complete is a function .....
            {
                complete();
            }

                return true;
        }
        element.style.opacity = op;  // for newer browsers
        op -= op * 0.01;  // reduce 10% each time
    }, 0.05);  // run every 50 seconds
    }

fadein function:

function fadein (element,complete) {   
    var op = 0.1  // initial opacity
    var timer = setInterval(function () {  //call the function every x milliseconds 
        if (op >= 0.99){   // stop the function when the op is higher then x ....
        element.style.opacity  = 1;
        clearInterval(timer); // clear the timer ....
                    if ( typeof complete === 'function' ) // run  it only if complete is a function .....
            {
                complete();
            }

        return true;


        }
        element.style.opacity = op;  // for newer browsers
        op += 0.01;  // reduce 10%
    }, 30);  // run every 50 seconds

    }

ChangeImage function:

 function ChangeImage (complete)  {

liran0.src=imagesarrays[indexid1];
 indexid1=indexid1 +1;


if(indexid1 >= imagesarrays.length){
        indexid1 = 0;
}
LiranC
  • 2,400
  • 1
  • 27
  • 55
  • http://stackoverflow.com/questions/7759809/javascript-animation-queueing-when-page-does-not-have-focus – Colleen Jan 16 '14 at 23:32
  • 1
    The browser may slow down timers in browser windows that are not currently displayed. This is to both preserve battery life (on battery power devices) and enhance performance for windows that are displayed. – jfriend00 Jan 16 '14 at 23:35

0 Answers0