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 。

Answer 2

您的代码FR.onload = function(e) { ... }部分只是为FR对象定义了一个处理程序。 像readAsDataURL()这样的FileReader方法是异步的-您的程序在执行FR.readAsDataURL(...)语句后继续。

然后，在完成文件读取后， FR.onload运行您为FR.onload指定的功能。 不确定是在console.log("22222");之前还是之后发生console.log("22222"); 声明。