javascript - 多个文件下载进度指示器

Question

所以我的问题是我异步下载了多个文件 blob，我需要为每个项目提供一个专用的进度条，但是下面的代码仅适用于最后一个进度条。有什么好的方法吗？这是我的代码：

const masterXHR = new XMLHttpRequest();
  masterXHR.open('GET', res.url, true);
  masterXHR.setRequestHeader('Authorization', `Bearer ${authCookie}`);
  masterXHR.setRequestHeader('X-XSRF-TOKEN', xsrfCookie);
  masterXHR.responseType = 'blob';
  masterXHR.onloadstart = () => { Notifs.downloadNotif(' is downloaded'); };
  masterXHR.onprogress = (e) => {
    const selector = [...document.querySelectorAll('#percentage')];
    const lastIndicator = selector[selector.length - 1];
    lastIndicator.innerText = `${Math.floor((e.loaded / e.total) * 100)}%`;
}
  masterXHR.onload = () => { download(masterXHR.response, fileName); };
  masterXHR.send();

快速 desc：它搜索所有<p>具有 id的存在#percentage并开始覆盖 nodeList 的最后一项的 innerText。它还会冻结所有以前的计数器，这就是问题所在。

标签： javascripthtml

Answer 1

元素 ID 不应具有相同的名称。将这些 id 命名为：percentage1、percentage2、percentage3...