setInterval 在 Chrome 上无法正常工作

我有一个定制的幻灯片对象来执行名称在网站上指示的常见操作。一切正常，除非我在 Chrome 中切换选项卡并返回网站选项卡。当这种情况发生时，幻灯片就会变得疯狂并开始淡化图像，而不管setInterval给定的间隔。找不到与此相关的任何内容，所以我想至少知道这是代码问题还是软件问题。

这是代码（与 jQuery 一起使用）：

$(function() {

    // slideshow
    var slideshow = {
        id : false,
        current : 0,
        count : 0,
        interval : false,
        init : function(data) {
            if (!data)
                return false;

            $.each(data, $.proxy(
                function(index, value) {
                    this[index] = data[index];
                }, this)
            );

            this.count = this.images.length;

            for (x=1;x<=this.count;x++)
                $('#slider ul.nav').append('<li></li>');

            $('#slider ul.nav li').live('click', function()
            {
                slideshow.click(this);
            });

            $('#slider ul.nav li:eq(0)').addClass('on');
            $('#slider ul.nav').css('width', (15*this.count)+'px');

            return true;
        },
        start : function () {
            slideshow.id = setInterval(function() { slideshow.action(); }, slideshow.options.interval);
        },
        stop : function() {
            clearInterval(slideshow.id);
        },
        action : function() {
            slideshow.current < (slideshow.count-1) ? slideshow.current++ : slideshow.current = 0;

            $('#slider img').fadeOut('normal', function() {
                $('#slider img').attr('src', slideshow.images[slideshow.current].url);
                $('#slider ul.nav li').removeClass('on');
                $('#slider ul.nav li:eq('+slideshow.current+')').addClass('on');
                $('#slider div.title').html(slideshow.images[slideshow.current].title);
                $('#slider div.description').html(slideshow.images[slideshow.current].description);
                $('#slider a.more').attr('href', slideshow.images[slideshow.current].target);
            }).fadeIn('normal');

            return true;
        },
        click : function(o) {
            slideshow.stop();

            var index = $('#slider ul.nav li').index(o);
            slideshow.current = index;

            $('#slider img').fadeOut('normal', function() {
                $('#slider img').attr('src', slideshow.images[index].url);
                $('#slider ul.nav li').removeClass('on');
                $(o).addClass('on');
                $('#slider div.title').html(slideshow.images[index].title);
                $('#slider div.description').html(slideshow.images[index].description);
                $('#slider a.more').attr('href', slideshow.images[index].target);
            }).fadeIn('normal');

            slideshow.start();
            return true;
        },
    };

    slideshow.init(slider);
    slideshow.start();

});

Chrome（显然最新版本的 Firefox 也是如此）降低了速度setInterval当选项卡位于后台时以提高前台性能。当背景页面中有快速运行的计时器驱动的动画时，这可能是最重要的。当页面返回前台时，它“尝试”赶上并运行一堆setInterval调用比通常运行的速度快得多。

解决方法是：

1. 延长时间setInterval这样 Chrome 就不会弄乱它（你必须查找那个时间是什么）。
2. 当页面进入后台时停止间隔计时器（当页面不可见时无需运行幻灯片） - 然后当页面进入前台时再次启动它。
3. 重复使用setTimeout代替setInterval使用某种类型的重复 setTimeout，如下所示：

Code:

function nextSlide() {
    // show next slide now
    // set timer for the slide after this one
    setTimeout(function() {
        nextSlide();       // repeat
    }, xxx)
}

类似的帖子here https://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs.