wling: "最近做了一段非常有 cool 的 JavaScript 代码，我在自己的博客里试了一下，效果非常棒欸！如果你的博客支持"

xFeedBeta

@wling-9360

wling·10 months ago

最近做了一段非常有 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);
})();