Best way to put delay after calling javascript functions

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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