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

Question

我正在尝试制作一个javascript横幅。 我在div中有3个图像，其中包含ID＃img1，＃img2 n＃img3。

<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> 

它工作正常。 唯一的问题是，现在我想在fadein效果之后添加延迟，但尝试差异我失败了。 那么可以做些什么来增加几分钟的延迟然后只调用下一个函数即。 我想在$("#img3").fadeIn(AnimTime)之后添加延迟$("#img3").fadeIn(AnimTime)和延迟之后只调用Show1()函数

Answer 1

好的，试试这个。 动画制作完成后：

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

Answer 2

我在这里做的就是这个要点： 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（）也只适用于对相同项目执行后续动画。 这些可以是完全不相关的函数执行。

Answer 3

尝试这个

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

你必须做一个睡眠功能看看这里是一个jQuery plygin

用法：

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

Answer 4

setTimeout(MyFunction(), 3000);

我会这样做只是在执行MyFunction之前暂停3秒。 希望这可以帮助...

Answer 5

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

1000是以毫秒为单位。