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

【问题标题】：Callback to a class instantiating another class making AJAX request回调一个类实例化另一个发出 AJAX 请求的类
【发布时间】：2013-02-23 12:01:36
【问题描述】：

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

一个类被实例化了。
这个类的构造方法然后实例化另一个类
这个新类的构造方法使用全局对象的方法来发出 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);

【问题讨论】：

标签： javascript ajax oop callback prototype

【解决方案1】：

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

$.get 返回一个 XHR 对象，您可以使用返回值并挂钩它的“成功”。

你可以把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
        }
},

注意，你也可以挂钩jQuery全局ajaxComplete方法：

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

您可以添加if 支票，请参阅the API

【讨论】：