-1

I am learning jQuery by writing a slideshow plugin which I will release for anyone to use if it turns out well. I've got a good start, but ran into an issue. If you switch tabs, and then come back to the page it's on, the timing is all messed up. I have seen this question which deals with the same thing, but I don't know how to apply the answer to my particular situation.

  1. So, how can I fix the SetInterval tab switching bug? Seen here by switching tabs: http://jsfiddle.net/8FkYj/
  2. High-fives for any suggestions on code improvements.

You can view & download the slideshow here: http://kthornbloom.com/slydeshow/ or see the JSFiddle: http://jsfiddle.net/8FkYj/

(Sorry for the novice js code! I at least tried to comment things well)

Community
  • 1
  • 1
kthornbloom
  • 3,660
  • 2
  • 31
  • 46

1 Answers1

6

You can bind a stop event to $(window).blur, and a start event to $(window).focus so the timer stops when the tab is inactive.

Something like:

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(slide, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});
Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241