여러 파일을 읽고 JavaScript를 사용하여 .onload 루프 외부에서 조작하는 방법은 무엇입니까?

Question

FileReader()로 여러 파일을 읽은 다음 조작하는 중이지만 onload 루프 외부에서 파일 데이터를 사용하는 방법을 알아낼 수 없습니다. 이 경우 writer div에 쓸 수 있지만 "unidentified"만 writer2 div에 출력됩니다. 내가 읽은 것부터 문제가 클로저와 관련이있을 것 같습니다. 나는 잘 모르겠다.

<script type="text/javascript"> 
function Slurper(that) 
{ 
    if(that.files) 
    { 
    var allMaps=new Array(); 
    for(i=0;i<that.files.length;i++) 
     { 

     var data = new FileReader() 
     data.readAsText(that.files[i]); 
     data.onload = function (event) 
     { 
      var input=event.target.result; 
      input=input.replace(/,/g," "); 
      input=input.replace(/\u0009/g," "); 
      input=input.replace(/(\r\n|\n|\r)/g," "); 
      input=input.replace(/ /g," "); 
      input=input.replace(/ /g," "); 
      allMaps[i]=input.split(" "); 
      allMaps[i].splice(0,19); 

      document.getElementById("writer").innerHTML+="<br>"+allMaps[i]; 
     } 
     document.getElementById("writer2").innerHTML+="<br>"+allMaps[i]; 
     } 
    } 
} 

Answer 1

아 - 오른쪽. 문제는 귀하의 onload 함수가 바깥 범위에 정의 된 i을 사용하고 있다는 것입니다. . 그래서 i 증가 유지하고, 시간을하여 온로드 기능을 i은 당신이 통과 파일의 수있을 것입니다 호출합니다 나는 당신이 할 수 있습니다 무엇을 생각하는 것은 :

data.onload = function(index) 
    return (event) 
     { 
      var input=event.target.result; 
      input=input.replace(/,/g," "); 
      input=input.replace(/\u0009/g," "); 
      input=input.replace(/(\r\n|\n|\r)/g," "); 
      input=input.replace(/ /g," "); 
      input=input.replace(/ /g," "); 
      allMaps[index]=input.split(" "); 
      allMaps[index].splice(0,19); 

      document.getElementById("writer").innerHTML+="<br>"+allMaps[index]; 
     } 
    }(i) 

이 당신에게 i의 현재 값을 바인딩 콜백 함수. 짧은 대답은 그렇습니다. 클로저와 스코프를 읽어야합니다.