javascript - 进度回调在进度期间未更新

Question

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

我想向用户提供一个进度条，如本演示所示:https://stuk.github.io/jszip/documentation/examples/downloader.html

zip.generateAsync()方法有一个回调方法，但发生的情况是文件完全压缩，然后在最后一次发送所有刻度(使用足够大的文件检查下面代码中的控制台输出)造成一些延迟)。

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

这是我的代码:

var statusEl = document.getElementById("status");

const fileSelector = document.getElementById("file-selector");

fileSelector.addEventListener("change", (event) => {
  readFile(event);
});

function readFile(event) {
  statusEl.innerHTML = "Loading file";
  const fileList = event.target.files;
  console.log(fileList[0]);

  const reader = new FileReader();
  reader.addEventListener("load", (event) => {
    statusEl.innerHTML = "Compressing file";
    zipFile(event.target.result);
  });
  reader.readAsArrayBuffer(fileList[0]);
}

function zipFile(result) {
  var zip = new JSZip();
  zip.file("myfile.txt", result);

  zip
    .generateAsync(
      {
        type: "blob",
        compression: "DEFLATE",
        compressionOptions: {
          level: 6
        }
      },
      updateCallback
    )
    .then(function (content) {
      saveAs(content, "example.zip");
    });
}

function updateCallback(metaData) {
  statusEl.innerHTML = metaData.percent.toFixed(2) + " %";
  console.log(metaData.percent.toFixed(2) + " %");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>

<label for="avatar">Choose a file:</label>

<input type="file"
       id="file-selector" name="file-selector" accept=".txt">
<div id="status"></div>

Answer 1

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

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

已更新

1. 您不需要使用 FileReader，您可以从文件选择器上的“onChange”获取文件。
2. 在generateAsync选项中添加了“streamFiles: true”。

所以，试试这个(如果你的文件至少有 8MB 才能清楚地看到百分比，那就太好了):

var statusEl = document.getElementById("status");

const fileSelector = document.getElementById("file-selector");

fileSelector.onchange = function() {
  var zip = new JSZip();
  zip.file("myfile.txt", this.files[0]);
 statusEl.innerHTML = "Compressing file";
 zip.generateAsync({
            type: "blob",
            compression: "DEFLATE",
            streamFiles: true,
            compressionOptions: {
                level: 6
            }
        },
        updateCallback
    )
    .then(function(content) {
        saveAs(content, "example.zip");
    });
};

function updateCallback(metaData) {
const percent = metaData.percent;

setTimeout(function() { 
   //console.log(percent);
   statusEl.textContent = percent.toFixed(2) + " %";
}, 10);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>

<label for="avatar">Choose a file:</label>

<input type="file"
       id="file-selector" name="file-selector" accept=".txt">
<div id="status"></div>