核心思路是手动控制跳转时机：先展示loading状态并禁用按钮，再通过setTimeout或fetch等异步方式延迟跳转，确保用户点击后100ms内有视觉反馈，避免误判卡死或重复点击。
跳转前显示 loading 的核心思路
HTML5 页面跳转本身是瞬时的，浏览器不会自动等待 loading 动画结束；所以必须手动控制跳转时机——先展示 loading 状态，再用 setTimeout 或 Promise 延迟跳转，或在资源加载完成后触发跳转。
关键不是“加个动效”，而是避免用户点击后无反馈、误以为卡死或重复点击。最简可行方案是：禁用按钮 + 显示文字/旋转图标 + 延迟跳转。
用 location.href 跳转时如何插入 loading
直接赋值 location.href = 'xxx' 会立刻导航，没机会展示 loading。正确做法是把跳转逻辑包进异步流程：
- 先修改 UI（如添加
loadingclass、替换按钮文字为加载中...） - 用
setTimeout延迟 300–500ms 再跳转，给视觉反馈留出时间 - 若跳转目标是内部页面且体积小，这个延迟足够；若目标页首屏依赖 JS/CSS 加载，建议改用
fetch预检后再跳转
示例：
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('click', () => {
button.disabled = true;
button.textContent = '跳转中...';
setTimeout(() => {
location.href = '/next-page.html';
}, 400);
});
SPA 场景下用 history.pushState + loading 更自然
单页应用中，pushState 不触发刷新，可以完全掌控跳转节奏。适合配合骨架屏或过渡动画：
- 调用
pushState后不立即渲染新内容，先显示 loading 区域 - 用
fetch加载新页面数据或组件，成功后再更新 DOM - 失败时需手动回退
history.back()，否则 URL 和视图不一致 - 注意监听
popstate事件，保证前进/后退时也能响应 loading 状态
避免踩坑的几个细节
loading 提示不是越多越好，重点在“可感知”和“不误导”：
- 不要在跳转后页面里再显示 loading——用户已离开原上下文，这属于无效提示
- 移动端慎用 CSS 动画（如
animation: spin 1s infinite），低端机可能卡顿反而显得更慢 - 如果跳转目标是外链（如
https://example.com），无法预知加载耗时，建议只做轻量反馈（如按钮变灰 + 文字提示），不强求“等加载完” -
location.replace()会丢弃当前页历史，若用户点返回键失效，要确认业务是否允许
真正影响体验的，往往不是 loading 动画多精美，而是点击后 100ms 内有没有视觉响应、跳转失败时有没有 fallback 提示、以及返回路径是否依然可用。
