Javascript全局数组访问成员未定义答案

【问题标题】：Javascript global array accessing member undefinedJavascript全局数组访问成员未定义
【发布时间】：2014-11-22 15:11:48
【问题描述】：

var arrayTest;

function handleFiles(files) {
   arrayTest = new Array();
   for(var i = 0; files[i]; i++) {
       var reader = new FileReader();
       reader.onload = function(e) {
          var binary = e.target.result;
          var parentSelector = '#output_' + i;
          $(parentSelector).html(binary);
          arraytest.push({ 'bin' : binary, 'parentSelector' : parentSelector });
       };
       reader.readAsBinaryString(files[i]);
   }
}

function buttonClick() {
    var files = [file1, file2];
    handleFiles(files);
    console.log(arrayTest); // I got the objects inserted at async function here, length != 0
    console.log(arrayTest.length); // 0
    console.log(arrayTest[0]); //undefined
    // accesing any member of arrayTest returns undefined
}

FireFox Console output.

上面的代码显示了一个 Js，它将文件转换为在按钮事件之后运行的二进制字符串，我遇到了无法访问全局变量 arrayTest 的问题，该变量使用来自 filereader onload 事件的新推送值进行更新。是有没有办法解决这个问题？

【问题讨论】：

不确定是否是这个原因，但您的代码中似乎有错字：arraytest.push(...) 而不是 arrayTest.push(...)

标签： javascript arrays scope

【解决方案1】：

好的。我意识到当我醒来时执行 console.log 时，异步任务可能仍在运行，这意味着 arrayTest 不完整，所以我就是这样做来解决这个问题的。

var arrayTest;
var asyncCount;

function handleFiles(files) {
   arrayTest = new Array();
   asyncCount = 0;
   for(var i = 0; files[i]; i++) {
       var reader = new FileReader();
       asyncCount += 1;
       reader.onload = function(e) {
          var binary = e.target.result;
          var parentSelector = '#output_' + i;
          $(parentSelector).html(binary);
          arrayTest.push({ 'bin' : binary, 'parentSelector' : parentSelector });
          asyncCount -= 1;
          if(asyncCount === 0) {
             console.log(arrayTest); 
             console.log(arrayTest.length);
             console.log(arrayTest[0]); 
             // at this point I am able to access all the array members.
          }
       };
       reader.readAsBinaryString(files[i]);
   }
}

function buttonClick() {
    var files = [file1, file2];
    handleFiles(files);
}

【讨论】：