I wrote a simple jquery slider that basically goes through 3 divs, hidding one and then fadeIn the next and so on using setInterval()
The slider works just fine for my purposes, but when I open other tabs and then come back to the page's tab, all the divs are visible and then they start to disappear and it starts working again.
Here is my jquery, which is inside $(function(){})
:
$('#slideshow-next').click(function() {
pauseSlideshow();
nextSlide();
});
$('#slideshow-prev').click(function() {
pauseSlideshow();
prevSlide();
});
$('#slideshow-pause').click(function(){
pauseSlideshow();
});
$('#slideshow-play').click(function() {
playSlideshow();
});
interval = setInterval('nextSlide()', 4000);
});
function playSlideshow() {
interval = setInterval('nextSlide()', 4000);
$('#slideshow-play').hide();
$('#slideshow-pause').show();
nextSlide();
}
function pauseSlideshow() {
interval = clearInterval(interval);
$('#slideshow-pause').hide();
$('#slideshow-play').show();
}
function nextSlide() {
//hide current slide
$('#slide'+currentSlide).hide();
// show next slide
var next = (currentSlide+1)%3;
$('#slide'+next).fadeIn('slow');
currentSlide = next;
}
function prevSlide() {
//hide current slide
$('#slide'+currentSlide).hide();
// show next slide
var next = (currentSlide-1)%3;
$('#slide'+next).fadeIn();
currentSlide =开发者_开发问答 next;
}
I think you might be hitting a different case as asked on Chrome: timeouts/interval suspended in background tabs?, which states that:
When a tab is inactive, only at a maximum of once per second the function is called.
So you could either code the setInterval
differently How can I make setInterval also work when a tab is inactive in Chrome? or detect the tab switch to halt the slideshow and re-start on tab focus How to tell if browser/tab is active
Also, Jquery setInterval too fast when coming from another tab may be useful as it states that
Firefox 5+ also clamps to one timeout per second in inactive tabs.
精彩评论