如何在new Image().onload嵌套函数中返回true验证图片URL有效性？

问题根源 #

图片加载是异步操作：checkImage函数执行时，设置图片src后会立刻结束，而onload/onerror回调要等图片请求完成后才会触发。你调用checkImage后马上打印valid，此时异步回调还没执行，自然拿到的是初始值false，全局变量也解决不了这个时序问题。

为什么不能直接返回true/false？ #

异步操作的结果只能在回调触发后才能确定，所以没办法让checkImage直接同步返回布尔值，必须用异步方式处理结果，下面是两种可行方案：

方案1：使用Promise（推荐现代场景）

function checkImage(url) {
  return new Promise((resolve) => {
    const image = new Image();
    image.onload = () => {
      // 通过图片宽度判断是否有效
      resolve(image.width > 0);
    };
    image.onerror = () => {
      resolve(false);
    };
    image.src = url;
  });
}

// 用async/await调用（需在async函数内）
async function validateImage() {
  const isValid = await checkImage('https://example.com/image.png');
  console.log(isValid); // 正确输出true或false
}
validateImage();

// 或者用.then()链式调用
checkImage('https://example.com/image.png').then(isValid => {
  console.log(isValid);
});

方案2：使用回调函数（兼容旧环境）

function checkImage(url, callback) {
  const image = new Image();
  image.onload = () => {
    callback(image.width > 0);
  };
  image.onerror = () => {
    callback(false);
  };
  image.src = url;
}

// 调用示例
checkImage('https://example.com/image.png', function(isValid) {
  console.log(isValid); // 正确输出true或false
});

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