JavaScript中如何获取img.onerror函数内修改的变量值？

这个问题我太熟了！核心原因是图片的onerror事件是异步触发的，你写的同步代码会比回调函数先执行，所以外部的file_exist还没来得及被修改就被读取了。咱们先拆解你两种写法的问题，再给你几个可行的解决办法：

先说说你的两种写法为什么不生效 #

1. 第一种写法：

img.onerror = function () { file_exist = false; };

这段代码本身是能修改file_exist的，但问题在于：当你在外部读取file_exist时，图片加载失败的事件还没触发（浏览器处理图片加载是异步流程），所以你拿到的还是初始值true。

2. 第二种写法：

file_exist = img.onerror = function () { return false; };

这里你犯了一个逻辑错误——你把file_exist直接赋值成了这个回调函数本身，而不是函数执行后的返回值。因为onerror回调是事件触发时才会执行，不是赋值的时候就运行，所以file_exist最后变成了一个函数，自然不是你想要的false。

几个可行的解决方案 #

方案1：把业务逻辑放到回调函数内部

既然回调是异步触发的，那直接把需要用到file_exist的逻辑放到回调里执行，就能确保拿到最新值：

var file_exist = true;
var img = new Image();
img.src = "你要检测的图片地址";

img.onerror = function () {
  file_exist = false;
  // 在这里处理变量更新后的逻辑
  console.log("文件是否存在：", file_exist); // 这里会输出false
  // 比如调用你的业务处理函数
  doSomethingWithFileStatus(file_exist);
};

function doSomethingWithFileStatus(status) {
  // 你的业务逻辑代码
}

方案2：用Promise包裹异步逻辑（现代JS推荐写法）

把图片存在性检测封装成Promise，就能用async/await或者.then()的方式优雅处理异步结果：

function checkImageExists(src) {
  return new Promise((resolve) => {
    const img = new Image();
    // 图片加载成功=存在
    img.onload = () => resolve(true);
    // 加载失败=不存在
    img.onerror = () => resolve(false);
    img.src = src;
  });
}

// 使用方式1：async/await（需要在async函数中执行）
async function runCheck() {
  const file_exist = await checkImageExists("你要检测的图片地址");
  console.log("文件是否存在：", file_exist); // 正确拿到false
  // 后续业务逻辑
}
runCheck();

// 使用方式2：.then()链式调用
checkImageExists("你要检测的图片地址").then((file_exist) => {
  console.log("文件是否存在：", file_exist);
  // 后续业务逻辑
});

核心总结 #

异步操作不能用同步的思维去拿结果，必须等待异步事件完成后再处理。本质上就是：不要在异步回调外面直接读取需要回调修改的变量，而是把逻辑放到回调内部，或者用Promise、async/await这类异步处理工具来同步化你的代码流程。

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