자바 스크립트 파일 처리

Question

드래그 앤 드롭을 사용하여 클라이언트 측 텍스트 파일을로드하려고합니다. 여기 예제 코드 및 튜토리얼에서 찾고 있었어요 : http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

모두가 reader.onload 이벤트까지 제대로 작동 여기 http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/ 하고 있습니다.

function handleFiles(files) 
{ 
var file = files[0]; 
var reader = new FileReader(); 

//create function to deal with the file once it is loaded 
reader.onload = handleLoadedFile(); 

// begin the read operation 
reader.readAsText(file); 

} 

function handleLoadedFile(event) 
{ 
alert(event.target.result); 
} 

나는 텍스트가 event.target.result에 있어야한다고 생각했지만 그렇지 않았습니다! 경고는 발생하지 않습니다.

Answer 1

대신

//create function to deal with the file once it is loaded 
reader.onload = handleLoadedFile(); 

의 당신이 작성해야

//store reference to function to deal with the file once it is loaded 
reader.onload = handleLoadedFile; 

설명 :

eventhandler = afunction() 이벤트 핸들러 저장 함수의 결과를 기록, 사건이이 때문에, undefined입니다 handleLoadedFile은 아무 것도 반환하지 않습니다.

eventhandler = afunction의 경우 처리기 설정시 함수가 평가되지 않습니다. 함수에 대한 참조 만 저장됩니다. 이벤트가 시작될 때 저장된 참조는 () 연산자로 평가됩니다 (아마도 이것이 실제로 정확한 이름은 아니지만 적어도 연산자로는 ()을 생각할 수 있습니다).

참고 : 이것은 숙련 된 JavaScript 프로그래머가 자주하는 실수입니다. 그리고이 올 경우, 예컨대 :

reader.onload = createEventListener('success'); 
reader.onerror = createEventListener('error'); 

function createEventListener(type) { 
    return function(event) { 
     var content; 
     if (type === 'success') { 
      content = processMyFile(event.target.result); 
     } else { 
      content = 'An Error occurred. Please try another file.'; 
     } 
     $('#content').html(content); 
    } 
} 

그래서 당신이 이벤트 처리기를 설정할 때 ()를 사용하지 않는 모든 경우에 잘못된하지 볼 수 있습니다. 위의 구문에는 JavaScript의 강력한 언어 기능 (즉, Closures)이 포함되어있어 잘 이해할 수 있기 때문에 너무 혼동하지 않기를 바랍니다.

는 참고 : call 및 apply 그냥 자바 스크립트 전문가 ;-)

추가 힌트에서 다운 투표를 피하기 위해 : 대한 alert()를 사용하지 않을하시기 바랍니다 당신이 그것을 참조있을 때 함수를 호출하는 다른 방법이있다 코드 디버깅. 최신 브라우저 (인터넷 익스플로러 < 11은 피해야합니다)로 테스트 할 때 코드를 추적하는 더 나은 방법이 있습니다 : console.log() 및 기타 방법은 console입니다. OK 버튼을 클릭 할 필요가 없으며 비동기 작업의 동작을 alert과 같이 극적으로 변경하지 않기 때문에이 기능을 사용하는 것이 좋습니다. Mastering Console Logging을 읽고 그걸 가지고 놀아 라.