Question

http://jsfiddle.net/nicktheandroid/B7Rhe/8/

In Chrome, when a browser tab is inactive, chrome slows any setInterval to only happen every second, even though my slideshow is once every two seconds, it’s still messing up.

go to the page above and see how there’s a slideshow there, now click on another tab in your browser window, stay there for 15 or so seconds, then click back to the tab with the slideshow, the slideshow will try to quickly fade in and out every slide to get caught up. But then I look at these simple slideshows and it doesn’t happen to them:

http://jonraasch.com/blog/a-simple-jquery-slideshow

Then on Jonathan Snook’s small slideshow it messes up like mine, but a plugin was made of his script and the plugin example doesn’t mess up…?

1 (messes up) Jonathan Snook’s script:
http://snook.ca/technical/fade/fade.html

2 (doesnt mess up)Plugin of the above:
http://mathiasbynens.be/demo/slideshow

QUESTION: why does mine mess up, and Jonathan Snooks mess up, when the plugin version of his doesn’t, and Jon Raasch’s slideshow doesn’t mess up either?

I found some other SO questions that deal somewhat with this but they didn’t have the answer I need. ere’s the jquery, just for reference here at SO:

var x = 2;
console.log('Not broken');
$('.slideshow li:gt(0)').css({opacity:0});

setInterval(function() {
    var m = $('.slideshow li').size();
    x += 1;
    if (x > m) {
        x = 1;
    }
    $(".slideshow ul li:visible").animate({
        opacity: 0
    });
    $(".slideshow ul li:nth-child(" + (x) + ")").animate({
        opacity: 1
    });
}, 2000);

Answer 1

After investigating and testing your example links, working and non-working… I see the link that is working fine in Chrome, is actually using jquery-1.3.2 . It looks like it’s working fine in Chrome using the old Jquery framework.

See the update link : http://jsfiddle.net/B7Rhe/10/