如何同步调用异步JavaScript函数？多图压缩上传重复问题求助

嗨，我一眼就揪出问题所在啦！你的代码里没有用块级作用域声明变量，再加上图片加载的onload是异步操作，导致循环过程中变量被不断覆盖，最后所有异步回调都拿到了最后一次循环的变量值，自然就出现最后一张图片重复的情况。

核心问题点 #

1. 全局变量污染：i、img、width、height这些变量都没加let/const声明，属于全局变量。循环时每次都会覆盖上一次的值，等异步的onload触发时，这些变量已经是最后一次循环的结果了。
2. 异步时序混淆：你期望串行执行压缩，但当前是一次性触发所有压缩请求——不过这不是重复的核心原因，解决了变量作用域问题，并行执行也不会重复；如果确实需要严格串行，我们也能轻松调整。

修复后的代码（满足串行执行需求） #

// 改成返回Promise的函数，方便控制异步时序
function resizeImg(source) {
  return new Promise((resolve) => {
    // 所有变量用const/let声明，限制在当前函数作用域内
    const img = new Image();
    img.src = source;
    img.onload = function() {
      const width = img.naturalWidth;
      const height = img.naturalHeight;
      // 这里替换成你实际的目标宽高
      const targetWidth = 800;
      const targetHeight = 800;
      const ratio = Math.min(targetWidth / width, targetHeight / height);
      const resizer = window.pica();
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      ctx.canvas.width = width * ratio;
      ctx.canvas.height = height * ratio;

      resizer.resize(img, canvas, { quality: 3, alpha: true, unsharpAmount: 0 })
        .then(result => resizer.toBlob(result, 'image/jpeg', 0.90))
        .then(blob => resolve(blob)); // 用Promise返回处理后的blob
    };
  });
}

document.getElementById('select').onchange = async function(evt) {
  const imgBlobArray = [];
  // 用let声明i，确保每次循环的i是独立的块级变量
  for (let i = 0; i < this.files.length; i++) {
    // await确保当前图片压缩完成后，再处理下一张
    const blob = await resizeImg(window.URL.createObjectURL(this.files[i]));
    imgBlobArray.push(blob);
    console.log(i);
    console.log(imgBlobArray);
  }
  // 这里可以添加上传blob数组的逻辑
};

关键修改说明 #

• 把resizeImg改成返回Promise的函数，用await就能轻松实现串行执行，完全符合你“循环1→执行resizeImg(1)→循环2→执行resizeImg(2)”的期望。
• 所有内部变量都用const/let声明，彻底避免全局变量污染，确保每张图片的压缩过程都使用自己独立的变量。
• 循环里用let i，保证每次循环的i不会被后续循环覆盖，控制台打印的索引也能和图片一一对应。

替换这段代码试试，应该就能解决最后一张图片重复的问题啦！

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