最近做了一段非常有 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 提出了一个更加模块化的版本，将代码封装在立即执行函数中，同时添加了事件清理机制。以下是改进后的代码：

改进点

• 模块化设计：
  • 使用立即执行函数，避免全局变量污染。
• 事件清理：
  • 在页面卸载时移除了 visibilitychange 监听器，减少内存泄漏风险。
• 简洁性：
  • 使用三元运算符和逻辑短路写法，使代码更加紧凑。

实际用在哪里？

我也不知道，很有趣就对了，这可以是你的博客的彩蛋，也可以是提醒什么的吧，看你用处在哪了！

small 贴士

• 适度使用：标题频繁变化可能会让人觉得烦的很，要控制好触发频率啊。
• 兼容性问题：虽然说现代浏览器几乎都支持 Visibility API，但如果你的用户群体使用旧版浏览器，还是做好兼容性处理最好。

像这样的代码我以后还会继续分享，大家拿去随便发挥，如果可以把博客留在评论区我去观赏一下也不是不行（