最近做了一段非常有 cool 的 JavaScript 代码,我在自己的博客里试了一下,效果非常棒欸!
如果你的博客支持自定义 JS,也可以尝试,让页面更生动有趣。
它能做什么?
当用户切换到其他标签页或者最小化浏览器时,标题会自动变成“别走太远了啊喂...”来“挽留”用户;而当用户回到页面时,标题会热情地显示“好耶,回来啦!ヾ (•ω•`)o”,两秒后还会自动恢复到原来的标题。
是不是很酷?上代码!
代码实现
// 定义原始标题
const originalTitle = document.title;
let timeoutId; // 用于存储延时器 ID
// 监听页面的可见性变化
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// 当页面不可见时更改标题
document.title = "别走太远了啊喂...";
// 清除可能存在的延时器
clearTimeout(timeoutId);
} else {
// 当页面可见时,延迟 2 秒更改标题
document.title = "好耶,回来啦!ヾ (•ω•`)o";
// 再过 2 秒恢复到原始标题
timeoutId = setTimeout(() => {
document.title = originalTitle;
}, 2000);
}
});
技术拆解
1. document.title
这是一个简单又强大的属性,可以用来读取或者更改网页标签上的标题内容。我们通过动态赋值,让标题“活起来”。
2. document.hidden
这个属性来自浏览器的 Visibility API,用来检测页面是否处于不可见状态。当用户切换标签页或者最小化浏览器时,它会变为 true;当用户重新回来时,它又会变回 false。
3. visibilitychange 事件
这是页面可见性变化时触发的事件,非常适合我们实现这种“侦测用户行为”的功能。
4. setTimeout 和 clearTimeout
setTimeout让我们可以在用户回来时延迟几秒执行标题恢复操作,这样显得更加自然。clearTimeout则用来确保不会有多余的延时操作积压,避免逻辑冲突。
特点与不足
优点:
- 实现逻辑简单,代码直观。
- 直接通过全局变量管理状态,快速完成功能。
不足:
- 使用了全局变量
originalTitle和timeoutId,可能与其他代码冲突。 - 没有清理事件监听器,可能导致页面卸载时出现潜在的内存泄漏。
- 使用了全局变量
改进版:来自评论区 liuzhen932 的建议
liuzhen932 提出了一个更加模块化的版本,将代码封装在立即执行函数中,同时添加了事件清理机制。以下是改进后的代码:
CodeBlock Loading...
改进点
- 模块化设计:
- 使用立即执行函数,避免全局变量污染。
- 事件清理:
- 在页面卸载时移除了
visibilitychange监听器,减少内存泄漏风险。
- 在页面卸载时移除了
- 简洁性:
- 使用三元运算符和逻辑短路写法,使代码更加紧凑。
实际用在哪里?
我也不知道,很有趣就对了,这可以是你的博客的彩蛋,也可以是提醒什么的吧,看你用处在哪了!
small 贴士
- 适度使用:标题频繁变化可能会让人觉得烦的很,要控制好触发频率啊。
- 兼容性问题:虽然说现代浏览器几乎都支持 Visibility API,但如果你的用户群体使用旧版浏览器,还是做好兼容性处理最好。
像这样的代码我以后还会继续分享,大家拿去随便发挥,如果可以把博客留在评论区我去观赏一下也不是不行(