页面加载失败自动刷新实现求助：setTimeout未正常取消问题

我明白这个功能对你毕业论文的重要性，咱们先拆解下问题出在哪，再一步步解决～

问题根源 #

你的代码里存在事件执行顺序的核心问题：

• $(document).ready()（DOM结构加载完成就触发）会比window.onload（所有资源包括图片、样式表都加载完才触发）更早执行。
• 当$(document).ready()执行时，time变量还没被window.onload赋值，这时候clearTimeout(time)相当于清除一个undefined的定时器，完全起不到取消的作用。
• 之后window.onload才会设置定时器，自然到时间就会触发页面刷新了。

修复方案 #

这里提供两种可靠的实现方式，你可以根据需求选择：

方案1：统一使用DOM加载完成事件（推荐）

把定时器的初始化和清除都基于DOM加载完成的事件，逻辑更一致且不易出错：

let reloadTimer;

// 脚本执行时立即设置刷新定时器
reloadTimer = setTimeout(() => {
  window.location.reload();
}, 5000);

// DOM加载完成后立即清除定时器
document.addEventListener('DOMContentLoaded', () => {
  clearTimeout(reloadTimer);
});

如果习惯用jQuery，也可以写成：

let reloadTimer;

reloadTimer = setTimeout(() => {
  window.location.reload();
}, 5000);

$(document).ready(() => {
  clearTimeout(reloadTimer);
});

原理：定时器在脚本运行时就初始化，而DOMContentLoaded（或$(document).ready()）会在DOM结构加载完成后触发，此时能确保拿到正确的定时器变量，成功取消定时任务。

方案2：基于全资源加载完成的双重保障

如果你需要等待所有资源（图片、样式等）加载完成再确认，可通过状态标记实现双重校验：

let isPageFullyLoaded = false;
let reloadTimer;

// 设置定时器，触发时先检查页面加载状态
reloadTimer = setTimeout(() => {
  if (!isPageFullyLoaded) {
    window.location.reload();
  }
}, 5000);

// 所有资源加载完成后标记状态并清除定时器
window.onload = () => {
  isPageFullyLoaded = true;
  clearTimeout(reloadTimer);
};

原理：定时器触发时会先判断页面是否已完全加载，若已加载则不执行刷新；同时window.onload触发后会主动清除定时器，形成双重保障。

额外提示 #

• 确保定时器变量（比如示例里的reloadTimer）处于全局或两个事件回调都能访问的作用域内，避免出现变量未定义的问题。
• 测试时可在浏览器调试工具的「网络」面板设置为「Slow 3G」，模拟页面加载缓慢的场景，验证自动刷新功能；正常加载时确认不会触发刷新。

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