JavaScript函数异常求助：imageExists无法正确返回值给checkImageValidity

这问题我之前调试userscript时也踩过坑！核心原因是图片加载是异步操作，你的imageExists函数在图片的onload/onerror回调执行前就已经完成了返回，所以checkImageValidity拿到的自然是默认的undefined。

为什么console.log能输出正确值？ #

你在回调里写的console.log会在图片加载完成（成功或失败）后才执行，所以能打印出正确的exists状态，但这个回调里的return并不会成为imageExists函数的返回值——因为函数早就已经执行到末尾，默认返回了undefined。

举个例子，你的代码大概是这种结构（我猜的）：

function imageExists(url) {
  const img = new Image();
  img.onload = () => {
    console.log(url + " -- " + true);
    return true; // 这个return只属于onload回调，和imageExists无关
  };
  img.onerror = () => {
    console.log(url + " -- " + false);
    return false; // 同理，这个return也不会让imageExists返回false
  };
  img.src = url;
  // 函数到这里就结束了，没有显式return，所以返回undefined
}

怎么修复？ #

要解决这个问题，得把imageExists改成异步函数，用Promise来包裹图片加载的逻辑，这样就能在加载完成后正确返回结果。

第一步：改造imageExists为Promise函数

function imageExists(url) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      console.log(url + " -- " + true);
      resolve(true); // 成功时传递true
    };
    img.onerror = () => {
      console.log(url + " -- " + false);
      resolve(false); // 失败时传递false
    };
    img.src = url;
  });
}

第二步：让checkImageValidity处理异步结果

你可以用async/await语法（更直观）：

async function checkImageValidity(url) {
  const exists = await imageExists(url);
  // 这里就能拿到正确的exists值了，接下来写你的业务逻辑
  console.log("图片有效性检查结果:", exists);
  return exists;
}

或者用.then()链式调用（兼容更旧的环境，但可读性稍差）：

function checkImageValidity(url) {
  imageExists(url).then(exists => {
    // 在这里处理exists的逻辑
    console.log("图片有效性检查结果:", exists);
  });
}

注意事项 #

因为是userscript，只要你的目标浏览器不是特别老旧（比如IE11及以下），Promise和async/await都是支持的，不需要额外的polyfill。如果必须兼容老环境，可以考虑用回调函数的方式，但Promise+async/await是现在更推荐的写法。

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