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])
}