html5 파일 판독기를 사용하여 업로드 한 여러 파일에서 텍스트를 푸시하는 이유는 무엇입니까?

Question

html 5 파일 판독기를 사용하여 두 개의 텍스트 파일을 업로드하려고합니다. 배열에 파일을 넣을 수는 있지만 함수에서 배열을 반환 할 수는 없습니다. 나는 그것들을 글로벌 배열로 밀어 넣고 그걸로 작업 할 수 있다고 생각합니다. 그러나이 질문을하는 것에 대한 나의 주된 이유는 여기서 분명히 이해할 수없는 것이 있기 때문에 왜 수익이 효과가 없는지를 배우는 것입니다.

function processFiles(files) { 
    console.log(getEmails(files)); //this statement should log textArray to console, but returns undefined instead 
    function getEmails(files){ 
     var textArray = []; 

     for(var i=0; i<files.length; i++){ 
      (function(files,i){ 

       var file = files[i]; 
       var reader = new FileReader(); 

       reader.onload = function (e) { 
        textArray.push(e.target.result); 
        if (i==(files.length-1)) 
        { 
         console.log(textArray); //this logs test array to the console no probs 
         return textArray;// so why wont this return text array so the previous console.log works 
        } 
       }; 
       reader.readAsText(file,"Unicode"); 
      })(files,i); 

     } 
    } 
} 


<input id="fileInput" type="file" onchange="processFiles(this.files)" multiple> 

Answer 1

reader.onload를 설정하면 함수를 호출하지 않고 파일로드시 함수를 호출하게됩니다. 이것은 getEmails 함수의 컨텍스트가 아닌 미래의 어떤 시점에서 발생합니다. 이를 비동기 함수라고합니다.

processFiles에서 해당 파일을로드 할 때 기록하려면 로그 할 수 없습니다. textArray (일반적으로 전역 변수 여야 함)를 빌드하는 각 "onload"이벤트에 대해 호출되는 외부 함수가 필요합니다. 총 "i"파일로드 시점을 알 수 있습니다 (다시 말하지만 전역 적으로 추적해야합니다. 이것이 일어날 순서를 모를 때), 결과를 기록하십시오.

는 (루프 내에서 다른 함수에서 기능을 래핑하는 이유는 확실하지 않다. 그 물건은 모두 인라인 루프에있을 수 있습니다.)

당신은 비동기에 읽을 할 수 있습니다 무슨 일이 일어나고 있는지 더 명확하게 알기 위해 처리합니다.