Geek Answers Handbook

Image flickers with setInterval ()

I made a carousel and used the javascript setInterval() function to rotate the image at a fixed interval in the carousel. Here is the script I 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 that I changed the browser tab and after a few minutes returned to the carousel browser, and what I saw was that the carousel was working too fast, and not by default, the images were changing, quickly changing 0 time intervals. Please help me how can I figure this out.

0
source share
3 answers

From what I know in newer versions of both firefox and chrome, the background tabs have setTimeout and setInterval clamped to 1000 ms to improve performance. Therefore, I think your problem may be related to this.

Perhaps this will help: How to get setInterval to work when the tab is inactive in Chrome?

+1
source

You must get rid of the first interval before starting another, or you will start working at several intervals at the same time (for example, why you start to see how this happens faster)

Do it

 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(); });
+4
source

Changing the image faster than expected may indicate that you have several calls to pauseSlide (), one way or another.

Is document ready only place you call? Any code in showlide or anywhere that triggers a document ready event? If you put alert() in pauseSlide() , does it appear more than once?

0
source

More articles:


All Articles