javascript - 如何制作一个高效的基于ajax的javascript脚本

Question

当脚本依赖于某些 ajax 或一般服务器响应时，我通常使用像这样的 javascript 或类似的东西来构建我的脚本。我真的不认为这是最有效的方法，那么执行这些类型的脚本的更好方法是什么？

function someclass() {

    //some internal variables here
    this.var1 = null;
    this.var2 = null;
    ...

    //some ajax function which gets some critical information for the other functions
    this.getAJAX = function() {
        self = this;
        urls = "someurlhere";
        //jquery ajax function
        $.ajax({
            type: "GET",
            url: url,
            dataType: 'json',
            complete: function (xhr, textStatus) {
                //get the response from the server
                data = JSON.parse(xhr.responseText);
                //call the function which will process the information
                self.processAJAX(data);
            }
         })

    this.processAJAX = function(data) {
        //set some of the internal variables here
        //according to the response from the server

        //now that the internal variables are set,
        //I can call some other functions which will
        //use the data somehow
        this.doSomething();
    }

    this.doSomething = function() {
        //do something here
    }

}

所以我会使用这样的脚本:

//instantiate the class
foo = new someClass();

//get the information from the server
//and the processAjax function will eventually
//call the doSomething function
foo.getAjax();

所以我真的不喜欢这个，因为在使用脚本时不清楚发生了什么。我希望能够做这样的事情:

//instantiate the class
foo = new someClass();

//get info from the server
//in this example, the processAJAX function will not call the doSomething
foo.getAjax();

//do something
foo.doSomething();

然而，这不起作用，因为服务器的响应通常需要一些时间，因此当调用 doSomething 时，必要的信息尚未存在，因此，该函数不会执行它应该执行的操作。

如何实现这一点？

我确信答案已经在 StackOverflow 上的某个地方，但是我找不到任何东西，所以我会很感激，要么是答案，要么是指向可以解释这一点的资源的链接，可能在 StackOverflow 上。任何帮助表示赞赏。谢谢。

Answer 1

此方法的标准模式是接受异步方法的回调函数，该类负责在操作完成时调用该回调函数。

function someclass() {
    this.getAJAX = function(callback) {
        this.afterAJAXCallback = callback;
        ...
    });

    this.processAJAX = function(data) {
        ...
        if (this.afterAJAXCallback) this.afterAJAXCallback();
    }
}

然后您可以使用闭包回调来构建您的代码，就像使用 jQuery 的 $.ajax 时的方式一样:

foo = new someClass();
foo.getAjax(function() {
    foo.doSomething();
});