实现“感知随机性”：避免重复点击的网页随机链接轮播方案-js教程-PHP中文网

实现“感知随机性”：避免重复点击的网页随机链接轮播方案

本文介绍如何在前端网页中实现“感知随机性”，即确保用户连续10次点击“随机内容”按钮时不会重复打开同一链接，通过 localstorage 实现轻量级、会话级去重逻辑。

本文介绍如何在前端网页中实现“感知随机性”，即确保用户连续10次点击“随机内容”按钮时不会重复打开同一链接，通过 localstorage 实现轻量级、会话级去重逻辑。

在用户体验设计中，“真随机”（true randomness）往往带来负面感知——例如用户连续两次点开同一链接，会感觉“不随机”甚至“有 Bug”。这种需求本质上不是追求统计学意义上的随机性，而是实现可控的、无近期重复的伪随机轮播，即所谓“感知随机性”（Perceived Randomness）。

核心思路是：记录用户最近访问过的链接历史（如最近 10 次），每次点击时从未出现在该历史列表中的链接中随机选取；当历史条目达上限（如 10 条）后自动清空，实现滑动窗口式去重。该方案无需后端、不依赖用户登录状态，完全基于浏览器 localStorage 实现客户端持久化。

以下是优化后的完整实现（已修复原代码中的递归栈溢出风险，并增强健壮性）：



  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>感知随机内容</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><div class="container py-5">
    <div class="text-center">
      <button class="btn btn-primary btn-lg" onclick="openLink()">? 随机内容</button>
      <p class="text-muted mt-3">确保同一链接至少间隔 10 次点击才可能重复出现</p>
    </div>
  </div>

  <script>
    const links = [
      "https://example.com/article-1",
      "https://example.com/article-2",
      "https://example.com/article-3",
      "https://example.com/article-4",
      "https://example.com/article-5",
      "https://example.com/article-6",
      "https://example.com/article-7",
      "https://example.com/article-8",
      "https://example.com/article-9",
      "https://example.com/article-10"
      // ⚠️ 注意：务必提供 ≥10 个链接，否则可能陷入死循环
    ];

    const STORE_KEY = 'recentlyOpenedLinks';
    const HISTORY_LIMIT = 10;

    // 安全读取历史记录（含错误处理）
    function loadHistory() {
      try {
        const raw = localStorage.getItem(STORE_KEY);
        return raw ? JSON.parse(raw) : [];
      } catch (e) {
        console.warn("本地存储读取失败，重置历史", e);
        localStorage.removeItem(STORE_KEY);
        return [];
      }
    }

    // 安全保存历史记录
    function saveHistory(history) {
      try {
        localStorage.setItem(STORE_KEY, JSON.stringify(history));
      } catch (e) {
        console.error("本地存储写入失败（可能超出配额）", e);
      }
    }

    // 获取一个“非近期重复”的随机链接
    function getRandomUnseenLink() {
      const history = loadHistory();
      const available = links.filter(link => !history.includes(link));

      // 若所有链接都在历史中（极端情况），重置历史并重新选
      if (available.length === 0) {
        console.log("所有链接均已近期使用，重置历史记录");
        saveHistory([]);
        return links[Math.floor(Math.random() * links.length)];
      }

      // 从可用链接中随机选取
      const randomIndex = Math.floor(Math.random() * available.length);
      return available[randomIndex];
    }

    // 更新历史：添加新链接，自动截断至 HISTORY_LIMIT 长度
    function updateHistory(link) {
      const history = loadHistory();
      const updated = [link, ...history].slice(0, HISTORY_LIMIT);
      saveHistory(updated);
    }

    // 主点击逻辑
    function openLink() {
      const link = getRandomUnseenLink();
      updateHistory(link);
      window.open(link, '_blank');
    }
  </script>

✅ 关键优化说明：

使用 slice(0, HISTORY_LIMIT) 替代递归调用，彻底避免栈溢出风险；
增加 try/catch 包裹 localStorage 操作，兼容私密模式或存储满等异常场景；
当所有链接均被占用时自动降级为“重置历史 + 真随机”，保障功能始终可用；
历史以“最新在前”顺序存储，便于直观调试（可在控制台执行 JSON.parse(localStorage.getItem('recentlyOpenedLinks')) 查看）。

⚠️ 注意事项：