Filereader.Onload запущен слишком рано

Question

Я пытаюсь прочитать файлы, загруженные по типу файла ввода (несколько). Код следующий:

$(document).ready(function() {
  $('#convert').on('click', function() {
     var files=$('#files')[0].files;
     if (!files) return;
     for (var i=0; i<files.length; i++) {
       var file=files[i];
       fr = new FileReader();
       fr.onload = (function(received) {      
         var note=$(fr.result);
       });
       fr.readAsText(file);
     }
  });
});

Теперь моя проблема: функция "onload" вызывается еще до загрузки файла. note никогда не имеет никакого контента. Но когда я ставлю точку останова как раз перед note - линия и подожди немного, note получает контент.

Похоже, событие onload()- вызывается слишком рано. Что я могу с этим поделать?

(Браузер Chrome)

Answer 1

Я заменил fr.result от this.result:

fr.onload = (function() {      
  var note=$(this.result);
});

Это сделало трюк

Answer 2

Ты делаешь fr глобальная переменная и во время запуска onload это будет объект, отличный от ожидаемого из-за цикла

Попробуйте обернуть его в IIFE, чтобы создать замыкание и сделать fr локальная переменная

for (var i = 0; i < files.length; i++) {  
  (function(file) {
    var fr = new FileReader();
    fr.onload = function(received) {
      var note = $(fr.result);// not sure what intent is here
    };
    fr.readAsText(file);
  })(files[i])
}