Javascript 进程回调在进程期间未更新

我已经编写了一些代码，用于读取本地文本文件，并使用JSZip库将其压缩为zip文件

我想向用户提供一个进度条，如本演示所示：

zip.generateAsync（）

方法有一个回调方法，但是发生的情况是文件被完全压缩，然后在最后一次发送所有的标记（使用足够大的文件检查下面代码中的控制台输出，以引起一些延迟）

在进程完成之前，我无法理解是什么阻止了回调。有人能帮忙吗

这是我的密码：

var statusEl=document.getElementById（“状态”）；
const fileSelector=document.getElementById（“文件选择器”）；
fileSelector.addEventListener（“更改”，（事件）=>{
读取文件（事件）；
});
函数读取文件（事件）{
statusEl.innerHTML=“正在加载文件”；
const fileList=event.target.files；
console.log（文件列表[0]）；
const reader=new FileReader（）；
reader.addEventListener（“加载”，（事件）=>{
statusEl.innerHTML=“压缩文件”；
zipFile（事件、目标、结果）；
});
reader.readAsArrayBuffer（文件列表[0]）；
}
函数zipFile（结果）{
var zip=newjszip（）；
zip.file（“myfile.txt”，结果）；
拉链
.生成同步(
{
键入：“blob”，
压缩：“放气”，
压缩选项：{
级别：6
}
},
updateCallback
)
.然后（功能（内容）{
saveAs（内容，“example.zip”）；
});
}
函数updateCallback（元数据）{
statusEl.innerHTML=metaData.percent.toFixed（2）+“%”；
log（metaData.percent.toFixed（2）+“%”；
}

选择一个文件：

JavaScript执行和页面呈现在同一执行线程中完成，这意味着在代码执行时，浏览器不会重新绘制页面

您需要做的是使用setTimeout（）。使用这些，在代码执行之间将有“空格”，浏览器将有机会重新绘制页面

已更新

您不需要使用FileReader，您可以从文件选择器上的“onChange”获取文件

在generateAsync选项中添加了“streamFiles:true”

所以，试试这个（如果您的文件至少为8MB，就可以清楚地看到百分比）：

var statusEl=document.getElementById（“状态”）；
const fileSelector=document.getElementById（“文件选择器”）；
fileSelector.onchange=函数（）{
var zip=newjszip（）；
zip.file（“myfile.txt”，this.files[0]）；
statusEl.innerHTML=“压缩文件”；
zip.generateAsync({
键入：“blob”，
压缩：“放气”，
streamFiles:true，
压缩选项：{
级别：6
}
},
updateCallback
)
.然后（功能（内容）{
saveAs（内容，“example.zip”）；
});
};
函数updateCallback（元数据）{
const percent=metaData.percent；
setTimeout（函数（）{
//控制台日志（百分比）；
statusEl.textContent=percent.toFixed（2）+“%”；
}, 10);
}

选择一个文件：

恐怕您需要一张支票

var statusEl=document.getElementById（“状态”）；
const fileSelector=document.getElementById（“文件选择器”）；
fileSelector.addEventListener（“更改”，（事件）=>{
var blob=新blob([
document.querySelector（'#worker1'）.textContent
]，{type:“text/javascript”}）
var-worker=new-worker（window.URL.createObjectURL（blob））；
worker.onmessage=函数（e）{
statusEl.innerHTML=e.data；
console.log（如数据）
}
worker.postMessage（event.target.files[0]）；
});
函数读取文件（事件）{
statusEl.innerHTML=“正在加载文件”；
const fileList=event.target.files；
log（“qui”，文件列表[0]）；
const reader=new FileReader（）；
reader.addEventListener（“加载”，（事件）=>{
statusEl.innerHTML=“压缩文件”；
console.log（event.target.result instanceof ArrayBuffer）
zipFile（事件、目标、结果）；
});
reader.readAsArrayBuffer（文件列表[0]）；
}
函数zipFile（结果）{
var zip=newjszip（）；
zip.file（“myfile.txt”，结果）；
拉链
.生成同步(
{
键入：“blob”，
压缩：“放气”，
压缩选项：{
级别：6
}
},
updateCallback
)
.然后（功能（内容）{
saveAs（内容，“example.zip”）；
});
}
函数updateCallback（元数据）{
statusEl.innerHTML=metaData.percent.toFixed（2）+“%”；
log（metaData.percent.toFixed（2）+“%”；
}

选择一个文件：
进口文件（“https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js");
函数readFile（文件）{
const reader=new FileReader（）；
reader.addEventListener（“加载”，（事件）=>{
zipFile（事件、目标、结果）；
});
reader.readAsArrayBuffer（文件）；
}
函数zipFile（结果）{
var zip=newjszip（）；
zip.file（“myfile.txt”，结果）；
拉链
.生成同步(
{
键入：“blob”，
压缩：“放气”，
压缩选项：{
级别：6
}
},
metaData=>self.postMessage（metaData.percent.toFixed（2）+“%”）
)
.然后（功能（内容）{
saveAs（内容，“example.zip”）；
});
}
self.onmessage=函数（e）{
读取文件（如数据）；
};

Btw，你应该使用

statusEl.textContent

而不是

innerHTML

。如果我用1.5Mb大小的相同文件运行问题中的代码段和两个答案中的代码段，除了进度消息不是从0%开始，而是从52-54%左右开始（在所有情况下），我可以在控制台中看到进度。那么问题又是什么呢？问题是否仅在局部重现？在问题中，它将同时显示所有的滴答声。在答案中，他们在接近过程结束时开始更新。问题似乎是它读取整个文件，而不是流式传输。在演示中，我将它的流式处理与ajax请求相链接，条形图正确显示，但我不确定如何流式处理