Ajax callback in javascript pattern

Question

I have the following code.

var foo = {
    ajaxcall : function(){
       var _obj = {};
       $.ajax({
            headers: {
                'Content-Type': "application/json; charset=utf-8",
                'dataType': "json"
            },
            async: false,
            url: "/getservertime"
        }).done(function(resp,stat) {
            resp = JSON.parse(resp);
            _obj.resp = resp;
            console.log(_obj);
            return _obj;
        });
    },
    init: function(){
        this.somefunction(this.ajaxcall());
    },
    somefunction: function(_data){
        console.log(_data); // coming as undefined
    }
}
foo.init();

How can I wait for execution of ajax to complete and then execute somefunction method. I have already tried async: false. Looks like some other issue.

score 4 · Accepted Answer · answered Sep 08 '15 at 17:45

How can I wait for execution of ajax to complete and then execute somefunction method.

You can't, without using async: false, and that's a bad idea.

Instead, you use a callback (either directly, or via promises). Here's a minimal modifications example:

var foo = {
    ajaxcall : function(callback){       // <== Accept callback
       var _obj = {};
       $.ajax({
            headers: {
                'Content-Type': "application/json; charset=utf-8",
                'dataType': "json"
            },
            async: false,
            url: "/getservertime"
        }).done(function(resp,stat) {
            resp = JSON.parse(resp);
            _obj.resp = resp;
            console.log(_obj);
            callback(_obj);               // <== Call it
        });
    },
    init: function(){
        this.ajaxcall(this.someFunction.bind(this)); // <=== Pass it
    },
    somefunction: function(_data){
        console.log(_data); // coming as undefined
    }
}
foo.init();

Note the this.someFunction.bind(this) bit: That creates a new function that, when called, will call someFunction with the correct this value. Now, your someFunction as written doesn't actually care about this, but I assume in your real code it would.

score 2 · Answer 2 · answered Sep 08 '15 at 17:44

You'll need to call it within the done() handler. Something like:

var foo = {
    ajaxcall : function(callback){
       var _obj = {};
       $.ajax({
            headers: {
                'Content-Type': "application/json; charset=utf-8",
                'dataType': "json"
            },
            async: false,
            url: "/getservertime"
        }).done(function(resp,stat) {
            resp = JSON.parse(resp);
            _obj.resp = resp;
            console.log(_obj);

            callback(_obj);
        });
    },
    init: function(){
        this.ajaxcall(this.somefunction);
    },
    somefunction: function(_data){
        console.log(_data); // coming as undefined
    }
}
foo.init();

Ajax callback in javascript pattern

2 Answers2