JavaScript 页面跳转与延时核心用 window.location 和 setTimeout；href/assign 会新增历史记录，replace 替换当前记录；延时跳转需正确封装，避免立即执行；传参优先用 URL 参数或 sessionStorage，禁用 localStorage；须防重复触发并校验 URL 安全。
用 JavaScript 控制页面跳转和延时，核心是 window.location 和 setTimeout 两个 API。关键不在“能不能”，而在“用哪种方式更合适”——跳转行为是否该留在历史记录里、用户能否后退、是否需要带参数或防重复触发，这些都决定具体写法。
常用跳转方式及适用场景
三种主流跳转方法区别明显，不能混用：
- window.location.href = 'url'：最直观，等价于用户手动输入地址回车。会新增一条历史记录，点浏览器“后退”能回到上一页。
- window.location.assign('url')：语义更清晰，作用和 href 完全一致，适合团队协作中强调意图的代码场景。
- window.location.replace('url')：替换当前历史条目，不留下原页面记录。登录成功后跳首页、表单提交后跳结果页，都该用它，避免用户点后退又回到已失效的表单页。
实现延时跳转的基本写法
延时本质是“先等，再执行跳转”，靠 setTimeout 封装跳转逻辑即可：
- 简单倒计时跳转（如 3 秒后跳首页）：
setTimeout(() => { window.location.href = '/'; }, 3000); - 带提示文字的倒计时（显示“2秒后跳转”）：需配合 DOM 更新和
setInterval，并在倒计时结束时调用clearInterval停止计时器，再执行跳转。 - 注意：不要写成
setTimeout(window.location.href = '/';, 3000)—— 这样赋值会立即执行，定时器只包了一个空操作。
跳转前传递数据的实用方案
URL 参数适合简单值，复杂结构建议用临时存储：
立即学习“Java免费学习笔记（深入）”；
-
URL 查询参数：跳转时拼接
/user?id=123&name=Tom，目标页用new URLSearchParams(window.location.search)解析。 -
sessionStorage：适合传对象或敏感信息（如用户 token、表单数据）。跳转前存：
sessionStorage.setItem('redirectData', JSON.stringify(data))；到达新页后读取并立刻清除，避免残留。 - 避免用
localStorage传一次性的跳转数据，它长期存在，易引发状态污染。
防止误触发与体验优化
真实项目中，跳转常嵌在用户操作或滚动事件里，必须加防护：
- 滚动到底部后延时跳转？用
hasTriggered标志位确保只启动一次定时器，否则快速滚动可能生成多个并发跳转任务。 - 表单提交后跳转？先禁用提交按钮，再设延时，避免用户连点多次导致重复提交。
- 跳转前做 URL 校验：尤其当目标地址来自用户输入或接口返回时，应白名单过滤或正则校验协议和域名，防范开放重定向漏洞。
