在非活动选项卡中暂停或实时运行 setInterval 函数

Question

我创建了这个函数，它每 3 秒触发一次按钮。现在，在我正在开发的网站上，页面上同时有 16 个这样的人，彼此相隔半秒。 Now when the tab becomes inactive, the timings get all screwed up and it doesnt work.我可以在代码中添加什么以使其在选项卡处于非活动状态时暂停动画或让它们实时继续。我个人不在乎哪一个有效，只要有效即可。

我为这个项目做了一个小提琴。

http://jsfiddle.net/JuFxn/

脉冲的代码是这样的

function fadeItIn() {

  window.setInterval(function () {

    // Fade Ins
    $('#child4').fadeIn(175);
    setTimeout(function () {
        $('#child3').fadeIn(175);
    }, 175);
    setTimeout(function () {
        $('#child2').fadeIn(175);
    }, 350);
    setTimeout(function () {
        $('#child1').fadeIn(175);
    }, 525);
    setTimeout(function () {
        $('#child').fadeIn(175);
    }, 700);

    // Fade Outs
    setTimeout(function () {
        $('#child').fadeOut(175);
    }, 875);
    setTimeout(function () {
        $('#child1').fadeOut(175);
    }, 1050);
    setTimeout(function () {
        $('#child2').fadeOut(175);
    }, 1225);
    setTimeout(function () {
        $('#child3').fadeOut(175);
    }, 1400);
    setTimeout(function () {
        $('#child4').fadeOut(175);
    }, 1575);

  }, 3000);
}

该函数在 JS 文档的开头被调用。再说一次，我不介意哪个有效，只要它有效。

Answer 1

即使页面没有处于非活动状态，这些时间也会慢慢漂移。你给setTimeout 的值并不是绝对精确的。

正因为如此，而且我认为它也可以解决您的实际问题，所以我建议使用单个 125 毫秒计时器，并记住要淡化哪个孩子（以及以何种方式）。这样一来，如果该计时器被暂停，它会从中断的地方继续（并且您不会遇到漂移问题）。

类似这样的：Updated Fiddle

$('.child0,.child1,.child2,.child3,.child4').hide();
fadeItIn();

function fadeItIn() {
    var child;

    child = 4;
    setTimeout(fadeIn, 3000);

    function fadeIn() {
        $("#child" + child).fadeIn(175);
        --child;
        if (child >= 0) {
            // Continue fading in
            setTimeout(fadeIn, 175);
        }
        else {
            // Start fading out
            ++child;
            setTimeout(fadeOut, 175);
        }
    }

    function fadeOut() {
        $("#child" + child).fadeOut(175);
        ++child;
        if (child <= 4) {
            // Continue fading out
            setTimeout(fadeOut, 175);
        }
        else {
            // Start over again
            setTimeout(fadeIn, 3000 - 1575);
        }
    }
}

注意：我将您的child 更改为child0。最好与这些事情保持一致。 :-)

（另外，fadeItIn 函数声明之后不需要分号。声明后面没有分号；表达式有。这无害，但我想我会提一下。）