Image flickering with setInterval() function

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 with how I can sort this out.

It sounds like you are starting more and more intervals. Are you calling `pauseSlide` from somewhere else? — Guffa, Sep 04 '12 at 15:06
if it is in showSlide(), or if it is called from some other code or module that isn't posted here, that still counts as calling it again. I think my proposed solution will likely help you in any case, hopefully. — sajawikio, Sep 05 '12 at 01:06

score 4 · Answer 1 · answered Sep 04 '12 at 15:06

You must get rid of the first interval before starting another, or you start getting more than one interval working simultaneously (i.e. 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();
});

That's what I was going to say! I'll +1 it :) – VVV Sep 04 '12 at 15:08 — VVV, Sep 04 '12 at 15:08

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

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?

edited May 23 '17 at 11:49

Community

1
1

answered Sep 04 '12 at 15:07

gion_13

41,171
10
96
108

score 0 · Answer 3 · answered Sep 04 '12 at 15:08

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 ?

Image flickering with setInterval() function

3 Answers3

Linked