如何在调用下一个回调函数之前添加延迟？

Question

我正在尝试制作一个JavaScript横幅。在一个带有id #img1，#img2和#img3的div中有三个图像。

<script src="scripts/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
    var AnimState = true;
    var AnimTime = 2000;
    var AnimDelay = 3000;
    $(document).ready( function()
    {
        $('#image img').hide();
        $('#img3').show();
        Show1();
    });
    function Show1()
    {
        if( AnimState === true )
        {
            $("#img3").fadeOut(AnimTime);
            $("#img1").fadeIn(AnimTime, Show2);
        }
    }
    function Show2()
    {
        if( AnimState === true )
        {
            $("#img1").fadeOut(AnimTime);
            $("#img2").fadeIn(AnimTime, Show3);
        }
    }
    function Show3()
    {
        if( AnimState === true )
        {
            $("#img2").fadeOut(AnimTime);
            $("#img3").fadeIn(AnimTime, Show1);
        }
    }
    $('#btn1').click( function()
    {
       AnimState = !AnimState;
       Show1(); 
    }); 
</script> 

它运行得很好。唯一的问题是现在我想在淡入效果后添加延迟，但尝试不同的东西失败了。那么可以怎么做来添加几分钟的延迟，然后才调用下一个函数，即我想在 $("#img3").fadeIn(AnimTime) 后添加延迟，并且在延迟之后才调用 Show1() 函数。

- KoolKabin

Answer 1

好的，请尝试这样做。在您的动画之后，按照以下步骤操作：

$("#img1").fadeOut(AnimTime);
$("#img2").fadeIn(AnimTime);
setTimeout(Show3, 30000); //delays next call for 30 seconds

- Squirkle

---

我也用同样的解决方案完成了我的工作。我想知道是否可以使用jQuery延迟函数来完成它？ - KoolKabin

当然可以。您只需要使用.delay()，然后使用允许回调的其他方法即可。但是上面的解决方案简单而优雅。我认为没有理由使用延迟函数，因为这种方法同样有效或更好。 - Squirkle

Answer 2

我在这个 gist 中提供了解决方法：http://gist.github.com/467030 基本上，它允许您创建一个完全不相关的函数数组，包括动画等...然后按给定的时间间隔逐个执行它们。

// create an array of functions to be executed
// everything in each step would be executed simultaneously
var myFuncs = [
    // Step #1
    function () {
        $("#img1").fadeOut(200);
        doSomething();
        doSomethingElseAtTheSameTime();
    },
    // Step #2
    function () {
        doOtherStuff();
    },
    // Step #3
    function () {
        woohoo();
    }
];

// then, the function in that gist: 
// Simple function queue runner. Just pass me an array of functions and I'll
// execute them one by one at the given interval.
var run_queue = function (funcs, step, speed) {
step = step || 0;
speed = speed || 500;
funcs = funcs || [];

    if (step < funcs.length) {
        // execute function
        funcs[step]();

        // loop it
        setTimeout(function () {
            run_queue(funcs, step + 1);
        }, speed);
    }

    return;
};

// run them.
run_queue(myFuncs, 0, 1000);

显然，这比你想要的要简单。但是基本思路非常有效。即使使用jQuery queue()仅适用于在同一项上执行后续动画。这些可以是完全不相关的函数执行。

- Henrik Joreteg

---

显然比我想象的要好得多...非常感谢...我会继续努力的。 - KoolKabin

Answer 3

试试这个

$("#img3").delay('1000').fadeOut(AnimTime);

你需要使用一个睡眠函数，可以看看这里，它是一个jQuery插件

用法：

$.sleep(3, function(){alert("I slept for 3 seconds!");});

- chahedous

---

我已经尝试过了，但添加它会导致$("#img1").fadeIn...的下一个语句先运行。 - KoolKabin

看一下sleep函数..我编辑了我的答案..希望那有用。 - chahedous

Answer 4

使用 $("#img3").fadeIn(AnimTime).delay('1000')

1000 是以毫秒为单位的。

- Squirkle

---

在哪里添加回调函数Show1？ - KoolKabin

Answer 5

setTimeout(MyFunction(), 3000);

我会这样做，只是在执行MyFunction之前暂停3秒钟。希望这有所帮助...

- TGarrett