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

Question

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事件中新推入的值更新的。是否有解决此问题的方法？

Answer 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); 
}