Question

我已创建此功能，每3秒钟发出一次按钮。现在，在我正在进行的网站上，同时在页面上有16个它们彼此相距半秒钟。现在当标签变为非活动状态时，时间会全部搞砸，但它不起作用。我可以添加什么来使代码能够暂停动画或让它们在选项卡处于非活动状态时实时保持运行状态。我个人并不关心哪一个有效，只要它有效。

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

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提供的值并非绝对准确。

正因为如此，并且因为我认为它也会解决您的实际问题，我建议使用单个125ms计时器，并记住要褪色的孩子（以及以何种方式）。这样一来，如果那个计时器被暂停，它会从它停止的地方开始（并且你没有漂移的问题）。

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

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

1 个答案: