downloader.onProgress = (progress) => { // 更新下载进度 downloadArray.set(downloader.data.timeid, { title: downloader.data.title, sUrl: downloader.data.sUrl, progress: downloader.data.progress, size: downloader.data.size, status:downloader.data.status, timeid:downloader.data.timeid }); mainWindow.webContents.send('donwloadStatus', true); mainWindow.webContents.send('consolelog', downloadArray); }; 这一段下载代码中,我用map 更新对应键值的 下载进度,但是为什么 A 下载器的进度会覆盖B下载器的进度
时间: 2024-02-05 15:03:02 浏览: 36
在你提供的代码中,`downloadArray` 是一个 Map 对象,其中键是下载任务的 `timeid`,值是一个包含下载任务信息的对象,包括 `title`、`sUrl`、`progress`、`size`、`status` 和 `timeid` 等属性。
在这段代码中,下载进度的更新是通过 `downloadArray.set` 方法实现的。这个方法会根据指定的键(即 `downloader.data.timeid`)设置对应的值。因此,如果你有多个下载器同时进行下载,并且它们的 `timeid` 相同,那么它们会在同一个键上进行操作。这可能会导致进度信息被覆盖的问题。
为了解决这个问题,你可以为每个下载器分配一个唯一的 `timeid`。例如,可以使用时间戳作为 `timeid`,确保每个下载器都有一个唯一的标识符。这样,即使有多个下载器同时进行下载,它们也会在不同的键上进行操作,不会相互干扰。
另外,如果你想要实现多个下载器同时更新进度信息,可以考虑使用数组或对象来存储下载器的进度信息,而不是使用 Map 对象。这样可以避免键的重复问题,并且更方便地进行操作。
相关问题
// 下载器类 class Downloader { constructor(data, options) { this.data = data; this.options = options; this.item = null; this.onStart = null; this.onProgress = null; this.onCompleted = null; this.data.progress = 0; // 新增 progress 属性 this.data.status='pause';//true 表示 进度没有结束,继续下载 this.data.timeid=0; } start() { const win = BrowserWindow.getFocusedWindow(); this.options.onStarted = (item) => { this.item = item; this.data.status='process';//true 表示 进度没有结束,继续下载 this.onStart(); if (!handleDownload.includes(item)) { handleDownload.push(item); } }; this.options.onTotalProgress=(progress)=>{ this.data.progress = progress.percent * 100; // 更新 progress 属性 this.onTotalProgress(progress); } this.options.onCompleted = () => { this.onCompleted(); }; download(win, this.data.dowloadLink, this.options); } pause() { if (this.item) { this.item.pause(); } } resume() { if (this.item) { this.item.resume(); } } cancel() { if (this.item) { this.item.cancel(); } } } ipcMain.handle('window-downloadNow', (msg, dataArray) => { for (var i=0;i<dataArray.length;i++) { var timenow=Date.now();//调用的时候,打个时间戳 const options = { directory: downloadPath, filename: dataArray[i].title + '.' + dataArray[i].fileType, saveAs: false, extension: dataArray[i].fileType, openFolderWhenDone: false, showProgressBar: true, showBadge: true, }; var downloader = new Downloader(dataArray[i], options); downloader.data.timeid=timenow;//存储唯一标识 downloader.start(); downloader.onStart = () => { // 下载开始 }; downloader.onTotalProgress = (progress) => { // 更新下载进度 downloadArray.set(downloader.data.timeid, { title: downloader.data.title, sUrl: downloader.data.sUrl, progress: downloader.data.progress, size: downloader.data.size, status:downloader.data.status, timeid:downloader.data.timeid }); mainWindow.webContents.send('consolelog2', JSON.stringify(handleDownload)); mainWindow.webContents.send('consolelog', downloadArray); mainWindow.webContents.send('donwloadStatus', true); }; downloader.onCompleted = () => { if(downloader.data.progress==100&&downloader.data.status=='process'){ mainWindow.webContents.send('endDownload', JSON.stringify(downloader)); mainWindow.webContents.send('donwloadStatus', false); downloader.data.status='complete' } if(downloader.data.progress<100){ mainWindow.webContents.send('donwloadStatus', true); } mainWindow.webContents.send('consolelog', downloadArray); }; } return JSON.stringify(dataArray); // 返回值将作为 Promise 的 resolved 值 }); 这个下载器有个问题,当dataArray 为24个时,下载的数据不是这24个,而是最后一个,为什么
这个问题可能是由于 JavaScript 中的闭包概念导致的。在 for 循环中,每次循环都会创建一个新的 downloader 对象并启动下载任务,但是在下载任务完成之前,循环就已经执行完毕了。此时,变量 i 的值已经变成了 24,而所有的 downloader 对象都共享了这个变量 i。当下载任务完成时,回调函数中的 i 值已经变成了 24,因此 downloadArray 中所有的元素都被更新为最后一个下载任务的信息。
要解决这个问题,可以使用 let 关键字代替 var,在每次循环中创建一个新的变量来存储当前循环的索引值。这样就可以避免闭包导致的问题。例如:
```javascript
for (let i = 0; i < dataArray.length; i++) {
// ...
}
```
另外,还可以将下载任务的启动和回调函数的绑定放在一个单独的函数中,避免在循环中重复创建对象。例如:
```javascript
function startDownload(dataArray, index) {
const options = { /* ... */ };
const downloader = new Downloader(dataArray[index], options);
downloader.data.timeid = Date.now();
downloader.onStart = () => { /* ... */ };
downloader.onTotalProgress = (progress) => { /* ... */ };
downloader.onCompleted = () => { /* ... */ };
downloader.start();
}
for (let i = 0; i < dataArray.length; i++) {
startDownload(dataArray, i);
}
```
这样就可以避免闭包导致的问题,同时也可以提高代码的可读性和可维护性。
// 下载器类 class Downloader { constructor(data, options) { this.data = data; this.options = options; this.item = null; this.onStart = null; this.onProgress = null; this.onCompleted = null; this.data.progress = 0; // 新增 progress 属性 this.data.status='pause';//true 表示 进度没有结束,继续下载 this.data.timeid=0; } start() { const win = BrowserWindow.getFocusedWindow(); this.options.onStarted = (item) => { this.item = item; this.data.status='process';//true 表示 进度没有结束,继续下载 this.onStart(); }; this.options.onTotalProgress=(progress)=>{ this.data.progress = progress.percent * 100; // 更新 progress 属性 this.onTotalProgress(progress); } this.options.onCompleted = () => { this.onCompleted(); }; download(win, this.data.dowloadLink, this.options); } pause() { if (this.item) { this.item.pause(); } } resume() { if (this.item) { this.item.resume(); } } cancel() { if (this.item) { this.item.cancel(); } } } 这是我说的类,里面有异步方法,怎么实现
你可以在异步方法执行完毕后,通过 Promise 或回调函数的方式通知外部代码。例如,在 onCompleted 回调函数中设置一个 Promise,然后在外部代码中等待这个 Promise 执行完毕,再执行下一步操作。类似下面这样:
```
class Downloader {
constructor(data, options) {
this.data = data;
this.options = options;
this.item = null;
this.onStart = null;
this.onProgress = null;
this.onCompleted = null;
this.data.progress = 0;
this.data.status = 'pause';
this.data.timeid = 0;
}
start() {
const win = BrowserWindow.getFocusedWindow();
this.options.onStarted = (item) => {
this.item = item;
this.data.status = 'process';
this.onStart();
};
this.options.onTotalProgress = (progress) => {
this.data.progress = progress.percent * 100;
this.onTotalProgress(progress);
};
this.options.onCompleted = () => {
this.onCompletedPromise.resolve(); // 执行 Promise
};
this.onCompletedPromise = {}; // 保存 Promise 对象
this.onCompletedPromise.promise = new Promise((resolve, reject) => {
this.onCompletedPromise.resolve = resolve;
this.onCompletedPromise.reject = reject;
});
download(win, this.data.dowloadLink, this.options);
}
async pause() {
if (this.item) {
await this.onCompletedPromise; // 等待 Promise 执行完毕
this.item.pause();
}
}
async resume() {
if (this.item) {
await this.onCompletedPromise; // 等待 Promise 执行完毕
this.item.resume();
}
}
async cancel() {
if (this.item) {
await this.onCompletedPromise; // 等待 Promise 执行完毕
this.item.cancel();
}
}
}
```
这样就能保证异步方法执行完毕后再执行外部代码了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)