jQuery каждый + FileReader не возвращает правильные значения

Question

Я пытаюсь прочитать 2 CSV-файла, каждый из которых содержит строки чисел.

<input type="file" id="file[0]" name="file[0]"> 
<input type="file" id="file[1]" name="file[1]"> 

Файл 1 Содержание:

111 
222 

Файл 2 Содержание:

333 
444 

После прочтения содержимого, я раздвинуть номера в новый массив (csv_arr) и подсчета вхождений (csv_cnt).

var csv_arr = new Array(); 
var csv_cnt = 0; 

$("[id^=file]").each(function(index) { 
    file = $(this)[0].files[0]; 

    if (file) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      var csv_val = e.target.result.split("\r\n"); 

      for (var i = 0; i < csv_val.length; i++) { 
       csv_arr.push(csv_val[i]); 
       csv_cnt++; 
      } 
     }; 
     reader.readAsText(file); 
    } 
}); 

console.log(csv_arr); 
console.log(csv_arr.length); 
console.log(csv_cnt); 

Результат console.log являются:

['111','222','333','444'] 
0 
0 

Как видно из результатов, массив выглядит нормально, но тогда длина массива и количество равно 0! Я застрял и не уверен, что действительно неправильно. Есть идеи?

Answer 1

Ваш код работает рядом с вами забыли, что filereader является асинхронный.
Это означает, что ваш console.logs вызывается, пока onload по-прежнему загружает данные.

И нет. ваш массив (по крайней мере, с указанным точным кодом) не может привести к тому, что вы сказали - В противном случае вы получите 4 и 4, так как у массива есть значения. Это означает, что вы получаете вместо этого:

[] 
0 
0 

Проходят console.logs в функцию onload, и вы получите это:

["111", "222"] 
2 
2 
["111", "222", "333", "444"] 
4 
4