Question

我希望得到我认为是一个简单的脚本来运行AJAX调用并将各种值存储到一个对象，但我不能让全局变量保持一致，就像我期望的那样。

我绕着圈子去尝试我认为的一切。一旦我把AJAX调用放进去，我就无法让它与全局变量很好地配合。 process值始终为false，内容永远不会加载。

ExtContent = function(){
    var self = this;
    this.init = function() {
        self.output = null;
        self.process = false;
    };
    this.request = function(url){
        $.ajax({
            type     : 'GET',
            timeout  : 10000,
            dataType : 'html',
            url      : url,
            passself : self,
            success  : function(response){
                this.passself.setoutput(response);
            },
            error    : function(req,response){
                if(response==='error'){
                    self.error=req.statusText;
                }
            }
        });
    };
    this.setoutput = function(data){
        this.output = data;
        this.process = true;
    };
    this.returnprocess = function(){
        return self.process;
    };
    this.returnoutput = function(){
        return self.output;
    };
    self.init();
};

<div id="holder"></div>

loadcontent = new ExtContent(); 
loadcontent.request('/test.html');

if(loadcontent.returnprocess()){
    $('#holder').before(loadcontent.returnoutput());
}else{
    $('#holder').before('FAILED');
}

我无法将process变为true，并且要将内容存储在output中。

感谢。

Answer 1

尽管将所有内容都包装为类/对象，但jQuery $.ajax调用仍然是异步操作。基本上“你已经点了一份披萨，然后在它到来之前尝试吃它。”

即。订购它：

loadcontent.request('/test.html');

这会立即吃掉它：

if(loadcontent.returnprocess()){

setoutput的呼叫（即“披萨送货”）在这些操作完成后很久就会发生。

您需要向您的类添加事件处理程序属性，或使用deferreds + promises等待数据到达。

要使用promises，只需返回request的$ .ajax结果：

this.request = function(url){
    return $.ajax({
        type     : 'GET',
        timeout  : 10000,
        dataType : 'html',
        url      : url,
        passself : self,
        success  : function(response){
            this.passself.setoutput(response);
        },
        error    : function(req,response){
            if(response==='error'){
                self.error=req.statusText;
            }
        }
    });
};

并像这样使用它：

loadcontent.request('/test.html').done(function(){
    if(loadcontent.returnprocess()){
        $('#holder').before(loadcontent.returnoutput());
    }else{
        $('#holder').before('FAILED');
    }
 });

或者如果您在请求中正确设置了返回值：

loadcontent.request('/test.html').done(function(){
    $('#holder').before(loadcontent.returnoutput();
}).fail(function(){
    $('#holder').before('FAILED');
});

Answer 2

也许这可以帮到你

this.setoutput = function(data){
    // 'this' here, is refering 'setoutput' function, not ExtContent,
    // so ExtContent.process != ExtContent.setoutput.process

    // this.output = data;
    // this.process = true;
    self.output = data;
    self.process = true;
};

jQuery对象，不一致的全局变量和AJAX调用

2 个答案: