javascript - FileReader 是否需要更多时间来加载？

Question

下面是我的代码

var uploadIDImage = {
    IDPos: {},
    IDNeg: {}
};

var FR = new FileReader();

FR.onload = function(e) {
    console.log("123");
    console.log(e);
    $("#UploadIDPos img").remove();
        $("#UploadIDPos i").hide();
    $('#UploadIDPos').prepend('<img id="IDPosImg" style="width: 140px; height: 80px;"/>');
    var img = document.getElementById('IDPosImg');
  img.src = FR.result;
    uploadIDImage.IDPos.Files = FR.result.split(",")[1];
    console.log("11111");
};

if(e.target.files[0]) {
    FR.readAsDataURL(e.target.files[0]);  
    if(originalIDPosSize === undefined) {
            var size = Math.round(e.target.files[0].size / 1024 / 1024);
            originalIDPosSize = size;
        }
        else {
            totalSize  = totalSize + originalIDPosSize; 
            var size = Math.round(e.target.files[0].size / 1024 / 1024);
        }
        var remainSize = totalSize - size;
        console.log("Remain size : " + remainSize);
        $("#remain-size").text(totalSize - size);
        totalSize = remainSize;
} 

console.log("22222");
console.log(uploadIDImage.IDPos.Files);

我从 console.log 中得到的是首先打印“22222”和未定义，然后是“111111”。

为什么“11111”不先打印？

Answer 1

当你这样做

FR.onload = function(e) {... }

您正在 FileReader 上设置回调，该回调将在读取操作成功完成时调用。

现在您的脚本继续并运行 console.log("22222");

一段时间后，回调被调用，您会看到11111。