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

【问题标题】：How to delay the execution of a function in jQuery without setTimeout如何在没有setTimeout的情况下延迟jQuery中函数的执行
【发布时间】：2013-08-20 15:41:40
【问题描述】：

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

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 的其他原因？

【问题讨论】：

回答标题中的问题，“如何在没有setTimeout的情况下延迟jQuery中函数的执行”：你可以使用setInterval，虽然setTimeout是在这种情况下使用起来更方便。
你知道你可以停止超时，对吧？
@Kevin B 好吧，实话告诉你，不。我只用了一周的jQuery哈哈。
方法是clearTimeout(timerid)，它只是普通的旧javascript。 developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout
我这样做是为了让fadeItInDoom 在一个超时变量中，我在第一个脉冲完成后立即清除它。但是，在选项卡变为非活动状态后，时间仍未修复。我认为函数被调用后会发生一些事情，但考虑到函数在第一次之后再也不会被调用，这真的没有任何意义。

标签： jquery google-chrome settimeout

【解决方案1】：

在 Chrome 中，后台选项卡中的计时器/间隔每秒仅执行一次。见：Chrome: timeouts/interval suspended in background tabs?

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

教程：

【讨论】：