Javascript 使用setInterval淡入内容不会'；当用户切换选项卡时无法正常工作

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

这一切都很好，除非用户切换选项卡。如果经过足够的时间，当用户返回时，将显示两张幻灯片。当switch slide事件触发时，一切都会恢复正常

例如：

这是我的密码：

    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);
    });

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

如果可能的话，建议您选择

---

例如，您需要在特定时间发生一些事情，这将防止多个动画同时发生

在什么浏览器中发生这种情况，您在什么地方有一个例子吗？Chrome-我将用一个例子制作一个JSFIDLE谢谢。如果我能看一下它，就更容易对它说些什么，问题也可能出在html中。-我不认为这是HTML，因为正如您在示例中所看到的，即使内容非常简单，也会发生这种情况。我有一个类似的问题，请查看：但是requestAnimationFrame尝试以60 FPS的速度制作动画。那绝对不是我想要的。啊，那是真的。您应该能够在制作动画之前使用stop（）。这将防止同时出现多个动画，这是当用户返回并且浏览器试图赶上队列时发生的情况。我会用小提琴来更新答案。使用stop似乎可以做到这一点。这是一个奇怪的错误-谢谢你的帮助。