jquery synchronous functions

Question

Is there a way to run a function after another functions completes? For example:

doSomething();
doSomethingElse();

i only want doSomethingElse() to run after doSomething completes. is this possible?

• Mark Byers: Doesn't what you posted already do what you want? What am I missing here?
• echo: +1 to counter the -1. This question is as valid as any other.
• Nosredna: Any chance you can give us more code or tell us what you're trying to do?
• Pranjut: I have the same problem, if anyone can solve it please reply again.
• Reign.85: it's pretty clear, he want to call theese fct synchronously even they get async activities

Answer 1

If your doSomething() function is doing something asynchronously (such as making an Ajax request) then you'll want to make doSomethingElse() the callback for that asynchronous request, rather than having it execute immediately after doSomething() returns.

• ngreenwood6: I am making an ajax request so this looks like the valid solution to put it into the callback, but I was just trying to do it outside of the callback.

Answer 2

Actually you can do what you want with jQuery (at least in some sense). It could be considered a little bit hacky but works flawless.

Just include an element in your page which you don't use for anything else. e.g. an empty div somewhere.

<div id="syncFnHolder"></div>

And then include the JS with your functions + the runMe function written by me.

function doSomething() { alert("First"); }
function doSomethingElse() { alert("Second"); }
function doSomethingElseThree() { alert("Third"); }
function runMe(fn, selec) {
 return function() {
 fn();
 setTimeout(function() {
 $(selec).dequeue("syncFnQueue");
 }, 1000);
 } 
};
var selector = "#syncFnHolder";
//add three functions to a queue
$(selector).queue("syncFnQueue", runMe(doSomething, selector));
$(selector).queue("syncFnQueue", runMe(doSomethingElse, selector));
$(selector).queue("syncFnQueue", runMe(doSomethingElseThree, selector));
//start first function in queue (FIFO) others are triggered automatically
$(selector).dequeue("syncFnQueue");

This would generate three alerts with a distance of 1s between them saying "First", "Second", "Third".

If you want no delay remove the setTimeout and just leave the call to $(selec).dequeue("syncFnQueue");.

If your functions need parameters e.g. doSomething(x,y,z) you need to adapt the runMe function to be a better partial and to construct the returned function differently. Check here or post new question.

javascript partial

• nickytonline: Why not just do your queuing and dequeuing in a JS object. Seems pointless to pop it into a dummy DOM element.
• jitter: ? What how can I do that with jQuery ? Guess I can't follow on what you mean at this time of the day (02:45AM).
• ngreenwood6: very interesting I will look into the queue and dequeue methods

Answer 3

You may want to do this....

function doSomething(callback) {
 // code for do some thing
 // now fire off the callback
 if (typeof callback === 'function') {
 callback();
 }
}
function doSomethingElse() {
}
doSomething(doSomethingElse);

Answer 4

The question is a bit vague.

If your functions have asynchronous bits to them, then use callbacks. That's what they are for.

If, however, you want to do aspect-oriented programming in JavaScript, take a look at jQuery-aop.

Answer 5

There's no way to enforce this explicitly per se, but one idea is to have doSomething() return a value that doSomethingElse() accepts as a parameter:

 retval = doSomething();
 doSomethingElse(retval);

that way at least you prevent somebody from calling doSomethingElse() without at least supplying the argument it needs... of course, whether they get that argument from calling doSomething() is another issue. But this is a start.

Idea lifted from Code Complete.

• Nosredna: I don't see how that solves anything. The only way the question makes sense is if doSomething() is doing something asynchronous. Returning and passing values would have no effect on when the work gets done.