for循环等待image onload事件的返回

Question

javascript for循环等待image onload事件返回后，再执行其后面的代码
for (let i = 0; i< 4; i++) {

let img = new Image()
img.src = 'example.png'
img.onload = () => {
    console.log(1)
}
console.log(2)

}
执行结果先打印2后再打印1，如何可以先执行打印1后再打印2?

Answer 1

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()