javascript - 代码在调试时工作，但没有 - Javascript / Jquery

Question

我有一个我不明白的问题，我不知道如何解决它，从哪里寻找原因。当我调试（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.log的都出现了

@Katie.Sun - 现在是上面的for-但是当我调试代码时，同样有值！console.log(filteredAddedFiles.length);0console.log(filteredAddedFiles.length);

编辑：2

@Matti Price 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了，我忘了调用`promise

，但这并不重要，因为我90%的代码都因为这个话题和 金人@Kaiido的回答而改变了

URL.createObjectURL() - 是同步的。你不需要你的 Promise 包装事件处理程序地狱，所有这些都可以在一个循环中完成。

就我而言，这是一个比文件阅读器更好的解决方案，我只需要上传图像，并且有一些限制，因此我不必担心冻结 Internet 浏览器，因为synchronous性质createObjectURL() 谢谢你的帮助和承诺

标签： javascriptjquerygoogle-chromedebugging