使用setInterval（）函数闪烁图像

Question

I have made a carousel and using javascript setInterval() function for rotate image with fixed interval in carousel. Here's the script that i had used

var timeOut = 4000;

function showSlide() {
       //....script for showing image
}

function pauseSlide() {

   setInterval(function(){showSlide();}, timeOut);

}

jQuery(document).ready(function() {
        pauseSlide();
});

Now the problem is when i have change the browser tab and after few minute back again to carousel browser and what i seen carousel running too faster rather than default time interval, images going to change fast suppose 0 time interval. Please help me how can i sort out this.

Answer 1

You must get rid of the first interval before starting another, or you start getting more than one interval working simultaneously (ie why you start seeing it go "faster")

Do this

var timeOut = 4000;
var interval = 0;

function showSlide() {
       //....script for showing image
}

function pauseSlide() {

   clearInterval(interval);
   interval =  setInterval(function(){showSlide();}, timeOut);

}

jQuery(document).ready(function() {
    //NOW you can do multiple pauseSlide() calls
     pauseSlide();
     pauseSlide();
     pauseSlide();
     pauseSlide();
     pauseSlide();
});

Answer 2

From what I know in newer versions of both firefox and chrome, background tabs have setTimeout and setInterval clamped to 1000ms to improve performance. So I think that your issue might relate to that.

Maybe this will help : How can I make setInterval also work when a tab is inactive in Chrome?

Answer 3

Image changing faster than expected may indicate that you have more than one call to pauseSlide(), in one way or another.

Is document ready the only place you call the function ? Any code in showslide or anywhere triggering a document ready event ? If you put an alert() in pauseSlide() , does it popup more than once ?