0

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

http://jsfiddle.net/JuFxn/8/

$('.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 在fadeItIn 后500 毫秒内出现。This works, but the problem I am having is that when the tab becomes inactive, the timing of the second pulse animation gets off. 虽然这样做有点没有意义，因为当fadeItInDoom 函数进来时，setTimeout 已经过去了。我的假设是否正确？还是我没有得到的 setTimeout 发生了其他事情？

4

1 回答 1

0

在 Chrome 中，后台选项卡中的计时器/间隔每秒仅执行一次。请参阅：Chrome：后台选项卡中暂停的超时/间隔？

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

教程：

于 2013-08-20T19:21:45.783 回答