How can I make jquery wait for one function to finish before executing another function?

Question

function test(){
var distance=null;
       first();
       second();
       third();
alert(distance);//it shows null always because it take 2 second to complete.

}
 function first(tolat, tolon, fromlat,fromlon){

// calulating road distance between two points on the map using any other distance caluculating apis. 

distance=dis;  // update the value of distance but it takes 2 second to complete.

}
 function second(){}
 function third(){}

i have this type of situation in my code, now many time function three is called before first and second complete execution and distance value is not updated.

Check jQuery when() function. http://api.jquery.com/jQuery.when/ — Murali Murugesan, Oct 23 '12 at 12:43
the best approach depends entirely on what "any other distance caluculating api" is doing. — jbabey, Oct 23 '12 at 12:50
I've removed the J tag from this question as this question has nothing to with the J language. Please be more careful when tagging your questions in the future. Thank you. — sepp2k, Oct 23 '12 at 12:52
Take advantage of jquery queueing. See http://stackoverflow.com/questions/1095263/how-do-i-chain-or-queue-custom-functions-using-jquery — ForOhFor, Oct 23 '12 at 12:52

score 17 · Accepted Answer · answered Oct 23 '12 at 12:47

17

Make use of callbacks:

function first(tolat, tolon, fromlat, fromlon, callback) {
     if (typeof(callback) == 'function') {
        callback(distance);
     }
}

function second() { }
function third() { }

first("vartolat", "vartolon", "varfromlat", "varfromlon", function(distance) {
    alert(distance);
    second();
    third();
});

answered Oct 23 '12 at 12:47

Angelo A

2,744
6
28
37

1

I like this one, had no clue how to use callbacks. Going to research into this, thank you. – Oct 23 '12 at 12:54
1

These functions (like yours) are called 'asynchronous functions'. Callbacks prevent other functions from executing before the ansynchronous ones are completed (when used properly). You're welcome. – Angelo A Oct 23 '12 at 13:03

How can I make jquery wait for one function to finish before executing another function?

1 Answers1

Linked