for循环等待image onload事件的返回
问题
for循环等待image onload事件的返回
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
提问者在 for 循环中为每次迭代创建一个 Image 并监听 onload 事件，希望通过 async/await 让循环「等待」图片加载完成后再进入下一次迭代，但对目前写法是否正确、行为如何存在疑问。
涉及技术
JavaScript、Promise、async/await
期望结果
希望确认在 for 循环内使用 Promise + await 等待 img.onload 触发的写法是否可行，以及每次循环是否会等待图片真正加载完成才继续执行。
回答
原始回答
async function a(){
for (let i = 0; i< 4; i++) {
let img = new Image()
img.src = 'https://avatar-static.segmentfault.com/381/684/3816849164-5989a84b6952b_big64'//example.png'
var promise = new Promise((reslove)=>{
img.onload = async function(){
console.log(1);
reslove();
}
})
await promise
console.log(2)
}
}
a()
AI 优化 · 回答整理
解答思路
这种写法是可行的：在循环体内创建 Promise，将 resolve 放到 img.onload 回调中，再用 await 阻塞循环，直到图片加载完成后 Promise 被 resolve，循环才会进入下一次迭代。
示例代码
async function a() {
for (let i = 0; i < 4; i++) {
let img = new Image();
img.src = 'https://avatar-static.segmentfault.com/381/684/3816849164-5989a84b6952b_big64';
var promise = new Promise((resolve) => {
img.onload = async function () {
console.log(1);
resolve();
};
});
await promise;
console.log(2);
}
}
a();
详细说明
每次循环都会新建一个 Image 对象和对应的 Promise：图片开始加载后，await promise 会挂起当前循环体的执行，直到 img.onload 触发并调用 resolve()。由于 await 只会阻塞当前 async 函数的执行流，不会阻塞主线程，所以页面依然可以响应其他事件；同时因为 Promise 是在循环体内逐次创建的，每一轮都要等上一张图片加载完毕才会进入下一轮，实现了「串行等待」的效果。
小结
在 for 循环中结合 Promise 与 await，可以让每次迭代都等待图片 onload 触发后才继续，是实现「串行加载图片」的常见写法。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault