Calling multiple functions sequentially with jquery

Question

I want to loop through an object that contains functions which will execute one after another. My most ideal approach would be to have these chain somehow (ie. func2 waits for func1 and func3 waits for func2) but this needs to happen dynamically and the functions will all have different durations.

I'm using jQuery so I thought that perhaps "queue()" may help but I haven't worked with it much.

A main concern is to not add any scope/callbacks to the functions within the object. I'd rather somehow enclose them within a parent function to execute within the loop in order to create the callback/chaining.

Here's an example of what I've got now, but dumbed down. Thanks for any help!

var obj = [
{'name':'func1','callback':function(){ alert(1); }},
{'name':'func2','callback':function(){ alert(2); }},
{'name':'func3','callback':function(){ alert(3); }}
];

$.each(obj, function(x, el) { 
    el.callback();
});

I don't follow. Is obj the correct input, or is it incorrectly structured? What exactly is wrong with the above code (besides the 3 functions themselves being trivial)? — Matthew Flaschen
– Matthew Flaschen, Commented Jun 2, 2010 at 22:50
The problem is that the functions occur asynchronously instead of one after another. I also won't know how many functions are within the object so I don't want to/can't staticly chain them together. — darcy
– darcy, Commented Jun 2, 2010 at 22:57
No they don't. In the above code, they are guaranteed to happen in order. — Matthew Flaschen
– Matthew Flaschen, Commented Jun 2, 2010 at 22:58
The code you have does exactly what you describe. func2 doesn't run until func1 returns, same with func3 and func2... How are you expecting it to work differently? — joshperry
– joshperry, Commented Jun 2, 2010 at 23:02
@clarke, the actual functions will execute in order. However, any setTimeouts or async functions they start may not. Thus, you need to use the appropriate callback options. For instance, $.animate takes a callback as the third parameter. It may help if you post a more realistic example. However, if "not add any scope/callbacks to the functions" means the functions (func1, etc.) can't take a callback parameter, you may be out of luck. — Matthew Flaschen
– Matthew Flaschen, Commented Jun 2, 2010 at 23:08

Matey Yanakiev · Accepted Answer · 2012-12-04 00:05:58Z

1

Try this:

var obj = [
     function() { alert(1); },
     function() { alert(2); },
     function() { alert(3); }
];
$.each(obj,function() {
    // Replace 500 with whatever you want
    setTimeout(this,500);
});

You can also use a for loop, since there is no reason to use $.each, although it's no problem:

for (var i = 0; i < obj.length; i++) {
    // Replace 500 with whatever you want
    setTimeout(this[i],500);
}

It also depends on whether you want to have different timing based on what function you're executing.

Here is for a for loop:

for (var i = 0; i < obj.length; i++) {
    // Replace 500 with whatever you want
    setTimeout(this[i],500 * i);
}

And with $.each:

$.each(obj,function(i) {
    // Replace 500 with whatever you want
    setTimeout(this,500 * i);
});

answered Dec 4, 2012 at 0:05

Matey Yanakiev

1676 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan · Accepted Answer · 2014-09-30 02:45:51Z

0

The async-waterfall library can also help you do this.

answered Sep 30, 2014 at 2:45

Jonathan

33k40 gold badges144 silver badges209 bronze badges

Collectives™ on Stack Overflow

Calling multiple functions sequentially with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related