How to add Delay before calling next call back function in jquery

Question

Hi guys,

I am trying to make a javascript banner. I have 3 images inside a div with ids #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> 

It works fine. The only thing is that now i want to add the delay after fadein effect but trying diff stuffs i failed. So what can be done to add delay for few mins and then only call next function ie. I want to add delay after $("#img3").fadeIn(AnimTime) and after delay only call Show1() function

Answer 1

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

1000 is in milliseconds.

Answer 2

try this

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

You have to do a sleep function take a look here it's a jQuery plygin

usage:

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

Answer 3

Okay, try this. After your animations:

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

Answer 4

What I do for this is here in this gist: http://gist.github.com/467030

Essentially it lest you create a completely unrelated array of functions, animations or not... and then execute them one by one at the given interval.

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

Obviously, this is simpler than you'd want. But the basic idea works really well. Even using jQuery queue() only works for performing subsequent animations on the same items. These can be completely unrelated function executions.