Question

Given the following:

var doThings = (function ($, window, document) { 
  var someScopedVariable = undefined,
      methods,
      _status;

  methods = { 
    init: function () { 
      _status.getStatus.call(this);

      // Do something with the 'someScopedVariable'
    }
  };

  // Local method
  _status = { 
    getStatus: function () { 
      // Runs a webservice call to populate the 'someScopedVariable'

      if (someScopedVariable === undefined) { 
        _status.setStatus.call(this);
      }

      return someScopedVariable;

    },
    setStatus: function () { 
      $.ajax({
           url: "someWebservice",
           success: function(results){
              someScopedVariable = results;
           }
         });
    }
  };

  return methods;

} (jQuery, window, document));

The issue is clear, this is an async situation were I would like to wait until someScopedVariable is not undefined, then continue.

I thought of using jQuery’s .when() -> .done() deferred call but I cant seem to get it to work. I’ve also thought of doing a loop that would just check to see if its defined yet but that doesnt seem elegant.

Possible option 1:

$.when(_status.getStatus.call(this)).done(function () {
        return someScopedVariable; 
});

Possible option 2 (Terrible option):

_status.getStatus.call(this)

var i = 0;
do {
  i++;
} while (formStatusObject !== undefined);

return formStatusObject;

UPDATE:
I believe I stripped out too much of the logic in order to explain it so I added back in some. The goal of this was to create an accessor to this data.

Answer 1

I would suggest to wait for the complete / success event of an ajax call.

  methods = { 
    init: function () { 
      _status.getStatus.call(this);
    },
    continueInit: function( data ) {
      // populate 'someScopedVariable' from data and continue init
    }
  };

  _status = { 
    getStatus: function () { 
      $.post('webservice.url', continueInit );
    }
  };