回调到实例化另一个发出AJAX请求的类的类

Question

This is a somewhat difficult question to word. Here is the basic process:

1. A class is instantiated.
2. This class's constructor method then instantiates another class
3. This new class's constructor method uses a global object's method to make an AJAX request.

Once an ajax request has completed, I want to call a method that is on the class in step #1. What is a good way to achieve this?

Here is a jsFiddle of what I'm trying to do: http://jsfiddle.net/twiz/3PRma/4/

The same code is below:

//The global object that makes an ajax call
///////////////////////////////////////////////
globallyDoStuff={
    somethingWithACallback: function(url,callback){
        $.get(url,{},function(){
            // WHAT do I do here to call the 
            // "doSomethingToAllTheClasses" method?
        });
    }
}


// A class used to hold an array of classes
///////////////////////////////////////////////
var SomeClassCollection = function(arrayOfURLs){
    this.arrayOfClasses=[];
    for(var i=0;i<arrayOfURLs.length;i++){

        this.addSomeClass(arrayOfURLs[i]);
    }
};
SomeClassCollection.prototype={
    addSomeClass: function(theUrl){
        this.arrayOfClasses.push(new SomeClass(theUrl));
    },
    doSomethingToAllTheClasses: function(){
        // I WANT TO CALL THIS EACH TIME AN AJAX REQUEST IS COMPLETED
        console.log(this.arrayOfClasses);
    }
}


//The class that calls the global ajax object's method
///////////////////////////////////////////////
var SomeClass = function(theUrl){
    this.globalAction(theUrl);
};
SomeClass.prototype={
    globalAction: function(theUrl){
        globallyDoStuff.somethingWithACallback(theUrl);
    }
}

//List of urls
///////////////////////////////////////////////
var urls=[
    "/echo/json/",
    "/echo/json/",
    "/echo/json/",
    "/echo/json/",
    "/echo/json/",
    ]

//Create the instance
///////////////////////////////////////////////
var someInstance = new SomeClassCollection(urls);

Answer 1

It seems to me this is a broader problem with your architecture, however this is doable.

$.get returns an XHR object, you can use the return value and hook on its 'success'.

You can change globalAction to

globalAction: function(theUrl){
    return globallyDoStuff.somethingWithACallback(theUrl);
}

Then change the SomeClass constructor to

var SomeClass = function(theUrl){
    var result = this.globalAction(theUrl);
    //note, you now fill the object here, in the returned part
    //when a constructor returns an object it behaves like a normal function
    return {callRes:result,...};
};

Then change addSomeClass to

addSomeClass: function(theUrl){
        var addedClass = new SomeClass(theUrl);
        this.arrayOfClasses.push(addedClass);
        addedClass.callRes.done(function(){
           //your code executes here! EACH TIME AN AJAX REQUEST IS COMPLETED
        }
},

Note, you can also hook on the jQuery global ajaxComplete method:

$.ajaxComplete(function(){
   //this executes whenever ANY AJAX request is complete!
}

You can add an if check to it, see the API