javascript and order of execution of functions

Question

My Class looks like

function classUser() {
   var userName;
   var firstName;
   var lastName;
   var sessionid;
}

classUser.prototype.set_user_name = function (user_name) {
    this.userName = user_name;
}

classUser.prototype.set_first_name = function (first_name) {
    this.firstName = first_name;
}

classUser.prototype.set_last_name = function (last_name) {
 this.lastName = last_name;
}

classUser.prototype.get_curr_session = function () {
    return this.sessionid;
}

classUser.prototype.save = function () {

     $.ajax({
       type: "POST",
       url: "http://myapihost.com:8080/api/1.0/user/",
       data: JSON.stringify(this),
       dataType: "json",
       success: function (apiResponse) {
          var currSessionID = apiResponse.sessionId;
          this.sessionid= currSessionID;
        },
        error: function (apiResponse) {
          alert("error  : " + apiResponse);
          this.sessionid= "Error";
        }
    });
}

I call them as

    var User = new classUser();
    User.set_first_name(userFirstName);
    User.set_last_name(response.last_name);
    User.set_user_name(response.username);

    User.save();
    var currSessionID = User.get_curr_session();

Sometimes, get_curr_session is called before success: call.

Question : I tried returning sessionid from success itself so that save() function does the job. That is not working. hence i split across 2 functions.

Can I do it in one call itself? if I have use 2 functions - how do i make sure that it works all the time.

I could actually put assigning the currSessionID within success, however that breaks class sanctity. I have seen other solution like using "done", not sure if that would help here.

=======================================

I modified the code as below

classUser.prototype.save = function (callback) {

 $.ajax({
    type: "POST",
    url: "http://myapihost.com:8080/api/1.0/user/",
    data: JSON.stringify(this),
    dataType: "json",
    success: function (apiResponse) {
        var currSessionID = apiResponse.sessionId;
        this.sessionid= currSessionID;
        callback(null, currSessionID);
    },
    error: function (apiResponse) {
        alert("error  : " + apiResponse);
        this.sessionid= "Error";
        callback("error", null);
    }
});
}

When I call

User.save(mycallback);


function mycallback(error, sessId){
    if(error) {
        console.log("Some error occurred. Check code");
        return;// Something went wrong
    } else {
        console.log("Session : " + sessId);
    }
}

Is this good now?

Thanks Ajay

Answer 1

That's because the success and error function of the ajax request are executed asynchronously.

To make sure this doesn't happen, you should add a callback to your save function that is called after the success or error functions ran.

classUser.prototype.save = function (callback) {

     $.ajax({
       type: "POST",
       url: "http://myapihost.com:8080/api/1.0/user/",
       data: JSON.stringify(this),
       dataType: "json",
       success: function (apiResponse) {
          var currSessionID = apiResponse.sessionId;
          this.sessionid= currSessionID;
          callback(null, currSessionID);
        },
        error: function (apiResponse) {
          alert("error  : " + apiResponse);
          this.sessionid= "Error";
          callback(apiResponse, null);
        }
    });
}

Then, when calling the save function, you can do something like this:

User.save(function(error, sessId) {
    if(error) {
        // Something went wrong
    } else {
        // Do whatever you need to do
    }
});

You should note that this will also run asynchronously. So if you want to work with the session ID, don't do that after the User.save(...) call, but inside the function.

Answer 2

$.ajax() issues an asynchronous call to the url specified in the options object. See the jQuery documentation at http://api.jquery.com/jQuery.ajax/

success is a callback function that is invoked when the call is completed and all the response stream is read by the browser so basically in most of the cases the callback (updating the session id) will execute after you try to retrieve it.

Answer 3

I think what is happening here is that the default ajax call is async which means that the code var currSessionID = User.get_curr_session(); can execute before the success call completes.

You have a couple of options, you can try and update your code to be more async capable, using callbacks or other methods, or specify that you want your ajax call to be synchronous.