Question

我有一个幻灯片组件，我使用jQuery在javascript中编写。幻灯片显示由三张幻灯片组成，每张幻灯片都包含HTML内容。每张幻灯片都是一个带有.slide类的div。每隔7秒，我就会淡出应该隐藏的幻灯片并在我想要显示的幻灯片中淡出。我还有一些按钮（指示器），让用户通过单击按钮手动切换幻灯片。

除非用户切换标签，否则一切都很好。如果经过足够的时间，当用户返回时，将显示两个幻灯片。当开关滑动事件触发时，一切都恢复正常。

示例：

http://jsfiddle.net/vwdJ5/

这是我的代码：

    var slides = $(".slide");
    var indicators = $(".indicator li");
    var currentSlide = 1;

    var incrementSlide = function () {
        currentSlide = currentSlide === 2 ? 0 : currentSlide + 1;
    };

    var switchSlide = function () {
        if (currentSlide === 0) {
            var onDeck = 1;
            var inTheHole = 2;
        } else if (currentSlide === 1) {
            var onDeck = 2;
            var inTheHole = 0;
        } else {
            var onDeck = 0;
            var inTheHole = 1;
        }

        indicators.removeClass("active");

        $(indicators[currentSlide]).addClass("active");

        $(slides[onDeck]).hide();

        $(slides[inTheHole]).fadeOut(200, function () {
            $(slides[currentSlide]).fadeIn(200);
            incrementSlide();
        });
    };

    var interval = setInterval(switchSlide, 7000);

    indicators.click(function () {
        clearInterval(interval);

        if ($(this).hasClass("first")) {
            currentSlide = 0;
        } else if ($(this).hasClass("second")) {
            currentSlide = 1;
        } else if ($(this).hasClass("third")) {
            currentSlide = 2;
        }

        switchSlide();
        interval = setInterval(switchSlide, 7000);
    });

Answer 1

现代浏览器（肯定是Chrome和FF6）现在在非活动标签上使用“队列”系统。切换选项卡，setTimeout和setInterval仍然运行，但速度要慢得多。然后当你回到标签时，它会试图赶上，通常会导致奇怪的问题（对不起，可能不是最技术性的描述）。

如果可能，建议use requestAnimationFrame instead。

对于您需要在特定时间发生某些事情的示例you can just add stop() prior to the animations，这将阻止一次发生多个动画

当用户切换选项卡时，使用setInterval淡化内容无法正常工作

1 个答案: