我正在開發一個 React.js 應用程式，我有一個從j=1到j=2000的回圈，我想在 j=1 或 j=2000 時下載一個 zip 檔案。
問題是回圈結束后兩個zip檔案同時下載。換句話說，兩個 zip 的下載在 j = 2000 時開始。
我試圖通過使用 async 和 await 使 zip 生成同步，但它對我不起作用。
const generateCollection = async ()=>{
for(var j = 1; j <= 2000; j ){
let zip = new JSZip();
let metadata = zip.folder("metadata");
const obj = {name: "Simple name", age: "Simple age"}
metadata.file(`1.json`, JSON.stringify(obj, null, 4))
console.log("Start Downloading: ", j)
if(j===1 || j===2000){
await zip.generateAsync({type:"blob"})
.then(content=>{
setIsLoading(false)
FileSaver.saveAs(content, `collection_${j}.zip`);
console.log("Saved...... ", j)
})
}
}
}我將不勝感激任何幫助或建議！！
uj5u.com熱心網友回復：
這里的問題不在于 generateAsync 方法，而在于 saveAs，它被延遲到 cpu 可用并且不能像這里報告的那樣等待：
https://github.com/eligrey/FileSaver.js/issues/389
一個解決方案可能是根本不等待，而是將回圈轉換為異步事件，讓瀏覽器有時間在迭代之間顯示保存對話框：
const generateCollection = ()=> {
var j = 1;
const loop = function() {
if (j <= 2000) {
let j2 = j; //Create a local copy of the loop var
let zip = new JSZip();
let metadata = zip.folder("metadata");
const obj = {name: "Simple name", age: "Simple age"};
metadata.file(`1.json`, JSON.stringify(obj, null, 4));
console.log("Start Downloading: ", j)
if (j2===1 || j2===2000){
zip.generateAsync({type:"blob"})
.then(content=>{
saveAs(content, `collection_${j2}.zip`);
console.log("Saved...... ", j2)
});
}
j ;
setTimeout(loop, 0);
}
};
setTimeout(loop, 0);
}
$(function() {
generateCollection();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>請注意，由于安全限制，上面的代碼在 fiddle 中不起作用，您必須將其放在其他地方。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357632.html
標籤：javascript 反应 异步等待 es6-promise 压缩包
上一篇：按下按鈕后回圈遍歷物件陣列