I'm using jquery to call some javascript functions with a delay between them.
Also I'm using Jquery Wait

When I call below function,all functions are called recpectively,there are no delays between each other.

$(this)
.call(f1)
.wait(5000)
.call(f2)
.wait(5000)
.call(f3);

Here call function calls some function as I did

$.fn.call = function (f) {
    if (f)
        f();

    return this;
};

What am i doing wrong ? How can i achieve something like this ?
Thank you

I'm using jquery to call some javascript functions with a delay between them.
Also I'm using Jquery Wait

When I call below function,all functions are called recpectively,there are no delays between each other.

$(this)
.call(f1)
.wait(5000)
.call(f2)
.wait(5000)
.call(f3);

Here call function calls some function as I did

$.fn.call = function (f) {
    if (f)
        f();

    return this;
};

What am i doing wrong ? How can i achieve something like this ?
Thank you

• javascript
• jquery

• What, exactly, isn't working here? – Samir Talwar Commented Oct 7, 2010 at 8:10
• functions are called one by one,there are no delays between them – Myra Commented Oct 7, 2010 at 8:14

4 Answers 4

If you want to call a function every 5 seconds use

setTimeout(function(){f1},5000);
setTimeout(function(){f2},10000);
setTimeout(function(){f2},15000);

if you want to call each function 5 seconds after the last one terminated use

setTimeout(function(){f1;setTimeout(function(){f2;setTimeout(function(){f3},5000);},5000);},5000);

You don't need wait() from that cookbook; delay() is built-in and appears to have the same functionality. But either function involves adding something to jQuery's internal queue of effects and then removing it after a timeout expires, i.e. it's not a sleep statement, so it's not going to wait around before returning.

If you want to use delay() or wait(), you should make call() enqueue the function with queue(). Just sketching, but something like:

$.fn.call = function(f) {
    if (f) {
        $(this).queue(function() {
            f();
            $(this).dequeue();
        }
    }
    return this;
}

Then I'd expect your code to work the way you intend.

Here is a function that calls in sequence an array of function:

$.fn.callFn = function(fns, delay) {
    var fn, that = this;
    if(fns.length > 0){
        fn = fns.shift()
        fn && fn();
        setTimeout(function(){
            that.callFn(fns, delay);
        }, delay);
    }
    return this;
};

And you would call it like that:

$(this).callFn([f1, f2, f3], 2000);

$('#box').slideUp(300).delay(800).fadeIn(400);

/* .delay = wait time = 800 (this means it will wait 800/1000 of a second/ "1000 = 1 second") */