How do you make the script wait for the status of an Ajax get request before continuing?

Question

Basically what I'm doing is checking for the existence of an object, if it's not found, the script will try to load the source file using getScript. I only want to check this once though then return true or false to the function that calls fetch()

  fetch:function(obj){
      ...
        isReady = false;
   $.getScript(obj.srcFile,function(){

    isReady=true;
    warn("was able to load object "+key);

   });

   return isReady;

   }

but return kicks in before the script loads =/

later the script is loaded but the function returned false.

This is the beauty of asynchronous I suppose...

What's the best way to handle this... Maybe I could check again at some other point if the object exists?

Or maybe there's a better way to do this where I dont have to potentially lock the browser?

Answer 1

From the organizing of your code I am guessing you are using an object to contain your methods. If so then you could use custom events like this:

var thing = {
    fetch: function(obj){
        var self = this;
        if (obj.isReady){
            self.trigger('ready', [obj]);
            return;
        }
        $.getScript(obj.srcFile,function(){
            obj.isReady = true;
            self.trigger('ready', [obj]);
        });
    }   
};

thing.bind('ready',function(e, obj){
    // do what you need to do when the object exists here
});
var obj = {};
thing.fetch(obj);