javascript 异步加载执行问题

Question

一个数组存放众多图片的地址如：adag/1.jpg 之类的地址 我需要把这个数组中众多地址用js去判断每个图片的宽和高 如果 宽不等于高 就吧他删除 也就是不属于方图 等于的保留 该方法不能影响下面数据的执行顺序有知道的麻烦指导下
function getImageWidth(url,callback){

var img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if(img.complete){
    callback(img.width, img.height);
}else{
    img.onload = function(){
        callback(img.width, img.height);
    }
} 

这个函数是取图片宽高的
用循环执行的话并不能正确返回想要的值
想要的效果是 当吧这个数组所有图片不是方图的删除完毕在执行下面的程序

Answer 1

现有一堆图片地址，要实现以下功能
1、图片不能重复加载
2、只选择正方形图片

是要这么搞吗？

Answer 2

最好把getImageWidth的返回值换成Promise类型，然后用Promise.all取执行，一起取结果然后再执行后面的程序

function getImageWidth(url){
    return new Promise((resolve,reject)=>{
        var img = new Image();
        img.src = url;
        // 如果图片被缓存，则直接返回缓存数据
        if(img.complete){
            resolve(img);
        }else{
            img.onload = function(){
                resolve(img);
            }
        } 
    }
    );
}

var a=[];
for(...){
    a.push(getImageWidth(u).then(
        img=>{
            if (img.width!=img.height){
                ...//删除图片
            }
        }
    ));
}
Promise.all(a).then(v=>{
    //后面的处理
    ...
});

如果支持async/await可以更简单，就不写了。