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

Question

这是一个有点难以言说的问题。基本流程如下:

1. 实例化一个类。
2. 该类的构造函数方法然后实例化另一个类
3. 这个新类的构造方法使用全局对象的方法来发出 AJAX 请求。

一旦 ajax 请求完成，我想调用步骤 #1 中的类上的方法。实现这一目标的好方法是什么？

这是我想要做的 jsFiddle: http://jsfiddle.net/twiz/3PRma/4/

相同的代码如下:

//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

在我看来，这是您的架构的一个更广泛的问题，但是这是可行的。

$.get 返回一个 XHR 对象，您可以使用返回值并 Hook 其“成功”。

您可以将globalAction更改为

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

然后将 SomeClass 构造函数更改为

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,...};
};

然后将addSomeClass更改为

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
        }
},

注意，您还可以 Hook jQuery 全局 ajaxComplete 方法:

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

您可以为其添加 if 检查，请参阅 the API