如何在Glide中设置超时时间，超时后停止图片加载并执行后续逻辑？

核心结论 #

这两个回调都不适合放置超时控制逻辑，你需要单独实现超时定时器，和这两个回调配合完成需求。

具体实现思路 #

• 启动图片加载的同时，创建一个可配置时长的定时器，定时器到期后立即终止图片加载流程，抛出自定义超时异常，并执行后续函数。
• 在onResourceReady（图片加载成功）触发时，必须立即清除超时定时器——因为加载已完成，无需再触发超时逻辑。
• onLoadFailed仅用于处理**加载失败（如网络错误、资源不存在）**的场景，和超时是两种独立的失败情况，不要把超时逻辑放在这里，但可以在超时触发后，统一调用失败后续处理函数。

代码示例（原生JS） #

function loadImageWithTimeout(imageUrl, timeoutDuration = 3000) {
  return new Promise((resolve, reject) => {
    const imgElement = new Image();
    // 初始化超时定时器
    const timeoutTimer = setTimeout(() => {
      // 终止图片加载（清空src触发加载终止）
      imgElement.src = '';
      // 抛出自定义超时异常
      const timeoutErr = new Error('图片加载超时');
      timeoutErr.code = 'LOAD_TIMEOUT';
      reject(timeoutErr);
      // 执行超时后的后续函数
      runPostLoadLogic(false);
    }, timeoutDuration);

    // 图片加载成功回调（对应onResourceReady）
    imgElement.onload = () => {
      clearTimeout(timeoutTimer);
      resolve(imgElement);
      runPostLoadLogic(true);
    };

    // 图片加载失败回调（对应onLoadFailed）
    imgElement.onerror = () => {
      clearTimeout(timeoutTimer);
      reject(new Error('图片加载失败'));
      runPostLoadLogic(false);
    };

    // 开始加载图片
    imgElement.src = imageUrl;
  });
}

// 后续处理函数示例
function runPostLoadLogic(isSuccess) {
  if (isSuccess) {
    console.log('图片加载成功，执行后续操作');
  } else {
    console.log('图片加载失败/超时，执行后续操作');
  }
}

// 使用示例
loadImageWithTimeout('https://example.com/your-image.jpg', 5000)
  .then(img => console.log('加载完成', img))
  .catch(err => console.error(err.message));

关键细节说明 #

• 超时时长通过timeoutDuration参数灵活调节，满足不同场景需求。
• 自定义超时异常可以带上专属标识（如code: 'LOAD_TIMEOUT'），方便区分普通加载失败和超时失败。
• 无论加载成功还是失败，都要清除超时定时器，避免内存泄漏或逻辑冲突。

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