код работает во время отладки, но без - Javascript / Jquery

Question

У меня есть проблема, которую я не понимаю, и я понятия не имею, как ее исправить, где искать причину. Когда я debugin (chrome), все работает, но при обычном использовании - нет. Для меня это какая-то научная фантастика, для меня было бы лучше, если бы она была больше научной, чем художественной: :)

for (var i = 0; i < filteredAddedFiles.length; i++) {
  if ((/\.(png|jpeg|jpg|gif)$/i).test(filteredAddedFiles[i].name)) {

    (function (file) {
      var reader = new FileReader();
      var blob = b64toBlob(file.base64.replace('data:image/jpeg;base64,', ''), file.type);
      reader.addEventListener("load", function () {

        console.log(this);
        var image = new Image();
        image.src = window.URL.createObjectURL(blob);
        image.onload = function () {
          preview.innerHTML += drawHtml(image, file)
        };

        //I tried:
        //(function (b) {
        //  var image = new Image();
        //  image.addEventListener("load", function () {
        //    preview.innerHTML += drawHtml(this, file);
        //    //window.URL.revokeObjectURL(image.src);
        //  });
        //  image.src = window.URL.createObjectURL(b);
        //})(blob);
      });
      reader.readAsDataURL(blob); 
    })(filteredAddedFiles[i]);

  } else {
    errors += filteredAddedFiles[i].name + " Unsupported Image extension\n";
  }
}

здесь я приложил небольшой фильм, который показывает, как это работает ссылка на фильм

не работает - я имею в виду - похоже, все внутри for не выполнено

РЕДАКТИРОВАТЬ: 1

@ Teemu - я включаю логи в chrome console и все console.log появляются

@Katie.Sun - теперь вышеприведенное for - console.log(filteredAddedFiles.length); равно 0 - но когда я отлаживаю код, тот же console.log(filteredAddedFiles.length); имеет значения!

РЕДАКТИРОВАТЬ: 2

@ Матти Прайс filteredAddedFiles - это результат пользовательской логики страницы, фильтрации, проверка и т. д. Здесь все начинается:

addedFiles = added(files); // files - FileList from input this is a read only array of obj

function added(from) {
            var out = [];
            for (var i = 0; i < from.length; i++) {
                (function (obj) {
                    var readerBase64 = new FileReader();
                    readerBase64.addEventListener("load", function () {
                        var fileBase64 = readerBase64.result;
                        var row = { name: obj.name, size: obj.size, type: obj.type, base64: fileBase64 }
                        out.push(row);
                    });
                    readerBase64.readAsDataURL(obj); 
                })(from[i]);
            }
            return out;
        }

затем addedFiles - сделать что-нибудь дальше и преобразовать в filteredAddedFiles позже. что я нашел в added функции? во время отладки есть length значение, которое правильно, но когда я открыл __proto__: Array(0), я обнаружил length свойство = 0.

Должно ли это значение length быть равно значению сверху length?

Второе: Я должен признать, что мне не хватает знаний о addEventListener. Есть ли здесь какие-либо очереди или какой-то поток и т. Д.?

РЕДАКТИРОВАТЬ: 3 После последнего комментария @Teemu я внес некоторые изменения (мне пришлось прочитать много обещаний и т. Д. :)), но вывод тот же console.log("out resolve", out); показывает массив объектов, но console.log("out.length then", out.length); показывает 0 и small blue i-icon показать сообщение - Value below evaluated just now

var out = [];
for (var i = 0; i < files.length; i++) {
    fillArray(files[i], out);
}
console.log("out resolve", out);
console.log("out.length then", out.length);

function fillArray(obj, out) {
    return new Promise(function (resolve, reject) {
        var readerBase64 = new FileReader();
        readerBase64.addEventListener("load", function () {
            var fileBase64 = readerBase64.result;
            var row = { name: obj.name, size: obj.size, type: obj.type, out.push(row);
            resolve(out);
        });
        readerBase64.readAsDataURL(obj); 
    });
}

После того, как я разместил редактирование выше, я изменил, что я просто создаю promise, я забыл назвать `обещание

, но это не важно, потому что 90% моего кода было изменено из-за этой темы и ответа Золотого Человека @ Kaiido

URL.createObjectURL () - синхронно. Вам не нужен адский обработчик событий Promise, все можно сделать за один цикл.

В моем случае это лучшее решение, чем программа для чтения файлов, мне нужно загружать только изображения, и с некоторыми ограничениями, благодаря которым мне не нужно беспокоиться о зависании интернет-браузера из-за природы synchronous из createObjectURL() Спасибо за вашу помощь и приверженность