在JavaScript中使用Promissions和async Wait逐个加载图像

所需结果：我希望图像（图像和图像2）应逐个加载。以下是我的代码：

“严格使用”；
window.addEventListener（'DOMContentLoaded'，（）=>{
const cvs=document.querySelector（“#cvs”）；
cvs.width=window.innerWidth；
cvs.height=window.innerHeight；
const c=cvs.getContext（'2d'）；
让图像=新图像（）；//第一个图像
image.src=https://images5.alphacoders.com/559/559956.jpg';
设image2=新图像（）；//第二个图像
image2.src=https://www.highreshdwallpapers.com/wp-content/uploads/2013/03/Avengers-A.jpg';
设y=0；
让loader=img=>newpromise（resolve=>img.onload=resolve（img，0，y，100，60））；
让logger=img=>newpromise（resolve=>img.onload=resolve（img.src+'loaded！'））；
异步函数loadImages（）{
等待logger（image）.then（console.log）；//这是有效的
等待logger（image2）。然后（console.log）；//这是可行的
等待加载程序（图像），然后（c.drawImage）；
y+=60；
等待加载程序（图2），然后（c.drawImage）；
};
loadImages（）；
});
正文{
保证金：0；
}
#简历{
位置：固定；
}

页面标题
不支持画布
您的loadImages返回
未定义的
（因为您没有明确返回任何内容），因此
drawImage
不会执行任何操作

尽管还不完全清楚您希望做什么，但我觉得您希望在这个
then（）
中同时绘制这两幅图像

为了尽可能少地修改代码，您可以在一个数组中返回两个图像，然后在该数组中迭代并调用drawImage。

您还必须在
loader
函数中将所有参数作为数组传递

另外，请注意，
img.onload=resolve（…
）中有一个输入错误，它应该是
img.onload=e=>resolve（…
），否则将直接调用
resolve

还要记住，onload事件只会触发一次，所以一旦您等待它，它就不会再次发生（除非您强制它）


window.addEventListener（'DOMContentLoaded'，（）=>{
const cvs=document.querySelector（“#cvs”）；
cvs.width=window.innerWidth；
cvs.height=window.innerHeight；
const c=cvs.getContext（'2d'）；
让图像=新图像（）；//第一个图像
image.src=https://images5.alphacoders.com/559/559956.jpg';
设image2=新图像（）；//第二个图像
image2.src=https://www.highreshdwallpapers.com/wp-content/uploads/2013/03/Avengers-A.jpg';
设高度=0；
让loader=img=>new Promise（解析=>{
//将参数解析为数组
img.onload=e=>resolve（[img，0，height，100，60]）；
//强制重置src，否则onload可能已经启动
img.src=img.src；
});
异步函数loadImages（）{
常数a=等待加载程序（图像）；
高度+=60；
const b=等待加载程序（图2）；
//如果要在then（）中传递，则必须返回某些内容
返回[a，b]；
};
loadImages（）。然后（arr=>{
arr.forEach（args=>c.drawImage.apply（c，args））；
}).catch（控制台错误）；
})；
画布不受支持
不，没有绘制图像，只是x轴和y轴上出现了一些滚动条。我已经更新了我的问题，以便稍微理清我的逻辑。代码登录控制台，但没有绘制图像。为什么会这样？很抱歉，我没有发现一个输入错误（onload=e=>）+Chrome在附加第二个映像的处理程序之前触发第二个映像的onload事件，因为我们在添加第二个事件处理程序之前等待加载第一个映像。您只能用一个值来解析承诺。将多个内容传递给
resolve
将忽略除第一个以外的任何内容。@Bergi那么，我如何将它们减少为仅包含一个呢一个？将它们放入数组、对象或任何其他拟合数据中structure@Bergi你能给我举个例子吗，因为我不熟悉JS承诺。我的意思是像
resolve（[img，0，height，100，60]）
或者
resolve（{img，width:0，height，x:100，y:60}）
-或者你需要的任何东西