使用async函数加载多图仅最后一张生效，疑与全局变量相关

问题根源 #

你用了全局变量imgEl，每次调用createImage都会把这个变量替换成新创建的img元素。因为Promise.all是并行执行三个createImage，三个函数几乎同时运行，imgEl会被最后一次调用的img元素覆盖。前两个img的load事件触发时，执行append(imgEl)其实是在加最后那个img元素——而DOM里同一个元素只能存在一个位置，所以前两次append相当于把最后一张img从容器里移了两次，最终只留下最后一张。

修复方案 #

把imgEl的声明移到createImage函数内部，变成局部变量，让每个createImage调用都拥有独立的img元素，互不干扰。

修改后的代码：

const imageContainer = document.querySelector('.images');
function createImage(imgPath) {
  // 将imgEl改为函数内的局部变量
  const imgEl = document.createElement('img');
  return new Promise((resolve, reject) => {
    imgEl.src = imgPath;
    imgEl.addEventListener('load', () => {
      imageContainer.append(imgEl);
      resolve(imgEl);
    });
    imgEl.addEventListener('error', e => reject(e));
  });
}

async function loadAll(...imgPaths) {
  try {
    // 此处无需额外的async/await，createImage本身已返回Promise
    const res = await Promise.all(imgPaths.map(createImage));
    res.forEach(el => el.classList.add('paralell'));
  } catch (error) {
    console.log(error);
  }
}

loadAll('/img/img-1.jpg', '/img/img-2.jpg', '/img/img-3.jpg');

内容的提问来源于stack exchange，提问作者noharm