为博客增加点乐趣：用 JS 改变网页标题

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

(function () {
  "use strict";

  // 保存原始标题，用于后续恢复
  const originalTitle = document.title;

  // 存储定时器 ID，防止多个定时器冲突
  let timeoutId;

  // 处理页面可见性变化的逻辑
  function handleVisibilityChange() {
    // 清除上一次可能存在的延时器
    clearTimeout(timeoutId);

    if (document.hidden) {
      // 当页面不可见时，设置标题
      document.title = "别走太远了啊喂...";
    } else {
      // 当页面可见时，先设置一个提示标题
      document.title = "好耶，回来啦！ヾ(•ω•`)o";
      // 延时 2 秒后恢复原始标题
      timeoutId = setTimeout(() => {
        document.title = originalTitle;
      }, 2000);
    }
  }

  // 页面即将卸载时的清理逻辑
  function beforeUnloadListener() {
    // 移除可见性变化的事件监听器，避免内存泄漏
    document.removeEventListener("visibilitychange", handleVisibilityChange);
  }

  // 绑定页面可见性变化的事件
  document.addEventListener("visibilitychange", handleVisibilityChange);

  // 在页面卸载之前移除相关事件监听器
  window.addEventListener("beforeunload", beforeUnloadListener);
})();

改进点#

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

实际用在哪里？#

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

small 贴士#

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

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

此文由 Mix Space 同步更新至 xLog
原始链接为 https://ling.tblstudio.cn/posts/default/fun-with-js-dynamic-title