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

实现“感知随机性”：避免重复点击的网页随机链接策略

通过本地存储记录用户最近点击的链接，确保10次内不重复展示同一链接，提升用户体验中的“随机感”，而非纯粹数学随机。

通过本地存储记录用户最近点击的链接，确保10次内不重复展示同一链接，提升用户体验中的“随机感”，而非纯粹数学随机。

在网页开发中，“随机性”常被误解为“绝不重复”——但真正的随机（如 Math.random()）天然允许重复；而用户感知的“更随机”，往往意味着均匀分布、避免近期重复、有记忆性约束。本文介绍一种轻量、客户端实现的“感知随机性”方案：限制同一链接在连续10次点击中不重复出现。

核心思路是引入有限长度的历史队列（LIFO 或 FIFO），结合浏览器 localStorage 持久化保存用户最近点击的链接。每次点击时，算法优先从未出现在历史队列中的链接中随机选取；若所有链接均已入队（即队列满且待选集为空），则清空队列并重新开始——这既保证了最小重复间隔，又避免了死锁或无限递归。

以下是优化后的完整实现（已修复原代码中潜在的栈溢出风险和逻辑漏洞）：



  <title>Redirect From List</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><div style="text-align:center;padding:15px;">
    <button class="btn btn-primary" onclick="openLink()">Random Content</button>
  </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 条链接，否则无法满足“10次不重复”约束
    ];

    const STORAGE_KEY = 'recentlyClickedLinks';
    const HISTORY_SIZE = 10;

    // 安全读取历史记录（含错误兜底）
    function getHistory() {
      try {
        const raw = localStorage.getItem(STORAGE_KEY);
        return raw ? JSON.parse(raw) : [];
      } catch (e) {
        console.warn("Failed to parse localStorage history, resetting.", e);
        return [];
      }
    }

    // 安全写入历史记录
    function saveHistory(history) {
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(history.slice(-HISTORY_SIZE)));
      } catch (e) {
        console.error("Failed to save to localStorage:", e);
      }
    }

    // 获取一个不重复的链接（最多尝试 100 次防卡死）
    function getRandomUnseenLink() {
      const history = getHistory();
      const candidates = links.filter(link => !history.includes(link));

      if (candidates.length > 0) {
        const i = Math.floor(Math.random() * candidates.length);
        return candidates[i];
      }

      // 所有链接均在历史中 → 清空历史，重置周期
      console.log("All links recently used; resetting history.");
      return links[Math.floor(Math.random() * links.length)];
    }

    function openLink() {
      const link = getRandomUnseenLink();
      window.open(link, '_blank');

      // 更新历史（自动截断至 HISTORY_SIZE）
      const history = getHistory();
      history.push(link);
      saveHistory(history);
    }
  </script>

✅ 关键改进说明：