如何从异步回调中设置对象变量

Question

我刚开始用javascript创建自定义对象。我想使用下面的代码设置this.someObjVar，但是我的方法出了问题。也许异步响应使用它自己的作用域或线程。

// The code below used like: 
someClass = new extfoo.SomeClass(); 
someClass.loadArrFromFile(); 
// this will be called far later after async returns 
someClass.showSomeObjVar(); 

extfoo.js 
========= 
var extfoo = {}; 

extfoo.SomeClass = function() { 
    this.someObjVar = []; 
    this.showSomeObjVar = extfoo.showSomeObjVar; 
    this.loadArrFromFile = extfoo.loadArrFromFile; 
}; 
// Bad results here 
extfoo.showSomeObjVar = function() { 
    // results '0' 
    console.log('showSomeObjVar: ' + this.someObjVar.length); 
}; 

// Async array population 
extfoo.loadArrFromFile = function() { 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     this.someObjVar = xhr.responseText.split('\r\n') 
     // results '23' elements 
     console.log("someObjVar length: "+this.someObjVar.length); 
    } 
    } 
    // request code ... 
}; 

Answer 1

你肯定this.someObjVar被引用extfoo？

有一个机会，this对象在extfoo.loadArrFromFile函数引用函数本身（xhr.onreadystatechange），而不是extfoo对象：

extfoo.loadArrFromFile = function() { 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 

     //I'm going to create a new variable for this function called this.someObjVar 
     //Cause I don't know about extfoo's. 
     this.someObjVar = xhr.responseText.split('\r\n') 
     // results '23' elements 
     console.log("someObjVar length: "+this.someObjVar.length); 

     //Whup, end of the line, I guess I'll just forget about that variable I just made. 
    } 
    } 
    // request code ... 
}; 

有几种方法来解决这个问题，但进行测试，尝试将extfoo.loadArrFromFile函数中的this更改为extfoo。

以下是如何解决这个问题：

extfoo.loadArrFromFile = function() { 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 

     //OOOH you mean that object 
     extfoo.someObjVar = xhr.responseText.split('\r\n') 
     // results '23' elements 
     console.log("someObjVar length: "+extfoo.someObjVar.length); 

    } 
    } 
    // request code ... 
}; 

最后一件事......是extfoo.SomeClass.someObjVar应该是从extfoo.someObjVar不同？如果是这种情况，此代码将起作用，但除此之外，您需要在每个引用之间包含SomeClass。

Answer 2

因为它是一个异步请求，所以someClass.loadArrFromFile（）不会等待请求完成，因此someClass.showSomeObjVar（）将在完成之前调用。

你可以添加一个终止处理程序来处理结果：

extfoo.loadArrFromFile = function(done) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     this.someObjVar = xhr.responseText.split('\r\n') 
     // results '23' elements 
     console.log("someObjVar length: "+this.someObjVar.length); 
     done(); 
    } 
    } 

然后，您可以做这样的事情：

someClass.loadArrFromFile(function() { 
    someClass.showSomeObjVar(); 
});