Question

我有两个函数在这个小提琴中运行

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

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

function fadeItInDoom() {
    var doom;

    doom = 4;
    setTimeout(fadeInDoom, 3000);

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

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

我希望fadeItInDoom在淡入淡出后500ms进入。这是有效的，但我遇到的问题是，当标签变为非活动状态时，第二个脉冲动画的定时会消失。虽然它会这样做但它有点意义，因为当fadeItInDoom函数进入时，setTimeout已经通过了。我在这个假设中是否正确？或者是否有其他事情发生在我没有得到的setTimeout？

Answer 1

在Chrome中，背景标签中的计时器/间隔每秒只执行一次。请参阅：Chrome: timeouts/interval suspended in background tabs?

要解决您的动画问题，您需要使用不同的方法：requestAnimationFrame，它永远不会告诉您何时会发生下一个滴答，但您至少可以从内部推断出它

教程：

如何在没有setTimeout的情况下延迟jQuery中函数的执行

1 个答案: