jQuery Cycle plugin: Unpredictable behaviour after current browser tab loses focus

Question

We have developed a jQuery plugin based on the jQuery Easing and Cycle plugins. A sample can be seen at http://jsfiddle.net/Dx5N4/3/embedded/result/. The idea is to have multiple lists of items (say, images) to which the Cycle plugin is applied. Each list is given a different initial delay so that the jQuery Cycle slideshows on each list begin at a different point in time. A quick sample from the plugin is shown below.

var delay = 100;
$("#slideshow ul").each(function() {
    $(this).cycle({ delay    : delay
                    , easing : "easeInOutElastic"
                    , fx     : "scrollUp" });
    delay += 100;
});

When the page loads, the plugin works just fine. The Cycle plugin is applied correctly, the slideshows start and slides transition with a delay, as expected.

However, if the user switches to a different browser tab, minimizes the browser window or switches to a different application and then comes back to the browser tab with the slideshows, the delay between individual slideshows is lost. Completely unpredictable behaviour ensues at this point, ranging from all slideshows transitioning at the same time, to none transitioning at all.

Any thoughts on what goes wrong when the browser tab loses focus, and how this can be corrected?

Answer 1

Modified the plugin to trigger slide transitions manually through normal JavaScript.

var slideshows = $("ul", $("#slideshow"));

$(slideshows).each(function() {
    $(this).cycle({ easing : "easeOutElastic", fx : "scrollUp", timeout : 0 });
});

setInterval(function() {
    var item = 1;

    slideshows.each(function() {
        var slideshow = $(this);
        setTimeout(function() {
            slideshow.cycle("next");
        }, item++ * 100);
    });
}, 4000);

The modified (working) code is available at http://jsfiddle.net/Dx5N4/5/embedded/result/.