Wait for a function to finish before if()else()

Question

I have this:

var myError;

function getNames(user,location){
    myError=null;

    //Make an Ajax Call (this takes some time)
    //On Success do this:
        if(//Some Condition){
            myError=false;
        }else{
            myError=true
        }
}

function first(){
    getNames(user, location);

    if(myError==false){ //MYCONDITION
        //do some custom stuff just for first();
    }else{
        alert("Failed");
    }
}

function second(){
    getNames(user, location);

    if(myError==false){ //MYCONDITION
        //do some custom stuff just for second();
    }else{
        alert("Failed");
    }
}

Now, when I call first() or second() it always gives me alert message "FAILED". The problem is that //MYCONDITION is being executed before the getNames() function finishes. I want to wait for getNames() to execute before I can check //MYCONDITION.

I cannot set a delay since I don't know how much time getNames() is going to take. I was thinking about using some jQquery function but I cannot seem to find one.

And, I am trying to keep the getNames() as generic as possible. So, I am thinking of a way to not disturb the getNames().

The last option I see is adding callback() to getNames(). But, this function is being called by other functions too that won't need callback().

Any thoughts guys?

Thanks.

Answer 1

It's totally fine adding a callback; you can just check if it exists:

function getNames(user, location, callback){
    myError=null;

    //Make an Ajax Call (this takes some time)
    //On Success do this:
        if(//Some Condition){
            myError=false;
        }else{
            myError=true
        }

        if(callback) {
           callback.apply();
        }
}

If you're bothered by the arity not being generic enough, you can have the function accept an object instead of arguments, so:

function getNames(options) {
    var user = options.user;
    var location = options.loacation;
    var callback = options.callback;

    myError=null;

    //Make an Ajax Call (this takes some time)
    //On Success do this:
        if(//Some Condition){
            myError=false;
        }else{
            myError=true
        }

        if(typeof callback !== "undefined") {
           callback.apply();
        }
}

And when you call getNames , you can do:

getNames({
    user: "some user",
    location: "some location",
    callback: function() {
        ...
    }
});

or

getNames({
    user: "some user",
    location: "some location"
});

Answer 2

In jquery, if you don't like callbacks (which I highly hope you don't :) ) , you're in luck my friend. There is a flag in the $.ajax() function that you can use to turn async off for that specific AJAX request. Below is code sample:

http://api.jquery.com/jQuery.ajax/

var x = 1;
jQuery.ajax({
     url:    'http://example.com/catalog/create/',
     success: function(result) {
                x = 59;
              },
     async:   false
});

console.log(x);    //Should print 59 instead of 1