Javascript 加载图像有时会导致图像加载两次

我正在使用一个图像预加载工具，但我遇到了一个奇怪的问题，每当我提供多个图像来加载时，有时第一个图像会被处理两次

我知道它会被处理两次，因为在最后，当加载应该完成时，我会将数组记录到控制台，有时它会：

（2）[img][img]

（就像它应该是）如果我一直保持清新，我有时会遇到：

(2) [img] [img]
(3) [img] [img]

下面是生成该结果的代码。我不明白为什么有时它返回正确的值，而有时则不返回。如果您多次运行下面的代码段，您将在其中一次得到错误的结果

看起来

loadComplete（）

被点击了两次，这让人困惑，因为它后面有一个

return

，所以我不知道如何多次调用它

类负载{
构造函数（）{
this.queue=[]；
这个。完成=[]；
此值为0.totalItems=0；
this.itemsCompleted=0；
}
图像（src）{
返回此.addToQueue（src）；
}
addToQueue（src）{
让项目={
src:src，
加载：false
};
此.queue.push（项目）；
这个.totalItems++；
归还这个；
}
addToCache（）{
for（设i=0；i{
此.已完成.推送（项.数据）；
item.loaded=true；
this.addToCache（）；
});
item.data.addEventListener（'error'，（err）=>{
控制台日志（err）；
});
item.data.src=item.src；
item.data.crossOrigin='匿名'；
}
loadComplete（）{
console.log（this.completed）；
}
}
设荷载=新荷载（）；
load.image（'https://i.imgur.com/fHyEMsl.jpg');
load.image（'https://i.imgur.com/fHyEMsl.jpg');
load.start（）问题在于您以异步方式更新了完整的数据，因此无法正确计算。这里是一个更正示例（很抱歉，这有点混乱，但您可以理解这个想法）。希望能有帮助


类负载{
构造函数（）{
this.queue=[]；
这个。完成=[]；
此值为0.totalItems=0；
this.itemsCompleted=0；
}
图像（src）{
返回此.addToQueue（src）；
}
addToQueue（src）{
让项目={
src:src，
加载：false
};
此.queue.push（项目）；
这个.totalItems++；
归还这个；
}
addToCache（）{
for（设i=0；i{
此.已完成.推送（项.数据）；
这是loadCompleted（）；
});
item.loaded=true；
item.data.addEventListener（'error'，（err）=>{
控制台日志（err）；
});
item.data.src=item.src；
item.data.crossOrigin='匿名'；
}
loadComplete（）{
console.log（this.completed）；
}
}
设荷载=新荷载（）；
load.image（'https://i.imgur.com/fHyEMsl.jpg');
load.image（'https://i.imgur.com/fHyEMsl.jpg');
load.start（）