求助：网站预缓存系统中JavaScript循环点击链接失效问题

嘿，我来帮你搞定这个预缓存的遍历问题！你的代码里有两个关键问题导致每次只点第一个链接：

问题分析 #

• 重复的ID：HTML里所有链接都用了id="test"，但ID在页面中必须是唯一的。浏览器调用getElementById时只会返回第一个匹配的元素，所以每次都只会触发第一个链接的点击。
• 缺少遍历索引：你没有维护一个记录当前要点击哪个链接的变量，所以定时器每次都执行相同的操作，不会切换目标。

修复方案 #

我们可以这样调整代码：

1. 修正HTML结构 #

把重复的id="test"去掉，只保留class="click"来标识所有需要预缓存的链接：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pre-Cache</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<style>
body { font-family: yekan; text-align: center; background-color: #E2E2E2; direction: rtl; padding: 0 10px; }
</style>
</head>
<body>
<a class="click" href="https://www.youtube.com/" target="_blank">1</a>
<a class="click" href="https://www.google.com/" target="_blank">2</a>
<a class="click" href="https://yahoo.com/" target="_blank">3</a>
</body>
</html>

2. 改进JavaScript逻辑 #

添加一个索引变量来跟踪当前要点击的链接，每次定时器触发时点击对应索引的链接，然后更新索引（到最后一个后可以重置为0，实现循环遍历）：

// 获取所有需要预缓存的链接
const links = document.querySelectorAll('.click');
let currentIndex = 0;

// 设置定时器，每5秒执行一次
setInterval(() => {
  // 点击当前索引的链接
  links[currentIndex].click();
  // 更新索引，到达最后一个后重置为0
  currentIndex = (currentIndex + 1) % links.length;
}, 5000);

代码说明 #

• document.querySelectorAll('.click')：获取所有带有click类的链接，返回一个类似数组的NodeList。
• currentIndex：记录当前要点击的链接位置，初始为0（第一个链接）。
• (currentIndex + 1) % links.length：每次点击后索引加1，用取模运算保证索引不会超出链接列表的长度，到达最后一个链接后自动回到第一个，实现循环遍历。

如果你不想循环，而是遍历一次就停止，可以改成这样：

const links = document.querySelectorAll('.click');
let currentIndex = 0;

const intervalId = setInterval(() => {
  links[currentIndex].click();
  currentIndex++;
  // 当索引超过最后一个链接时，清除定时器
  if (currentIndex >= links.length) {
    clearInterval(intervalId);
    console.log('所有链接预缓存完成');
  }
}, 5000);

这样就能实现依次遍历所有链接的预缓存需求啦！

内容的提问来源于stack exchange，提问作者mani144125