為博客增加點樂趣：用 JS 改變網頁標題

最近做了一段非常有酷的 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