jquery - 在非事件选项卡中实时暂停或运行 setInterval 函数

Question

我创建了这个函数，每 3 秒脉冲一次按钮。现在，在我正在开发的网站上，页面上同时出现了大约 16 个消息，彼此之间的间隔时间为半秒。现在，当选项卡变为非事件状态时，计时就会全部搞砸，并且无法工作。我可以在代码中添加什么来实现它，以便在选项卡处于非事件状态时暂停动画或让动画继续实时播放。我个人并不关心哪一个有效，只要它有效即可。

我为这个项目做了一个 fiddle 。

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 函数声明之后不需要分号。声明后面没有分号；表达式有。这是无害的，但我想我会提到它。)