JavaScript addEventListener无点击时定时触发click更新fetch咨询

你写的这段代码完全无法实现预期需求，存在多处基础逻辑和语法错误。

• 事件绑定参数非法：addEventListener的第一个参数要求传入标准事件名称字符串，你写的!'click'是逻辑运算表达式，运算结果是布尔值false，浏览器无法识别要绑定的事件类型，这整段代码从页面加载完成后就不会执行任何逻辑。
• 定时器启动逻辑矛盾：就算修正了事件名，把setInterval写在事件回调内部，意味着必须先手动触发一次对应事件，定时器才会开始工作，和你「无用户点击时自动执行更新」的需求完全相悖。
• 模拟点击目标错误：定时器里直接调用change.click()触发的是外层#select容器的点击事件，无法获取到具体表格行的ID，最终发起fetch请求时的URL参数是错误的，拿不到对应项的内容。

核心思路是把数据请求逻辑从点击事件里抽离，不要强依赖事件对象传参，单独启动定时器做轮询，同时加标记位避免和用户手动点击的请求重复：

const change = document.getElementById("select");
// 存储当前需要更新的表格项ID，默认赋值为第一个可点击项的ID即可
let currentActiveId = "first-item";
// 标记用户是否刚触发了手动点击，避免重复发起请求
let justUserClicked = false;

// 抽离独立的数据请求方法，直接接收项ID作为参数
function updateItemContent(itemId) {
  if (!itemId) return;
  fetch(`www.abc.com/${itemId}`)
    .then((res) => res.json())
    .then((resData) => {
      // 此处保留你原有的表格展开、内容渲染逻辑
      console.log("内容更新完成", resData);
    });
}

// 保留原有的用户点击事件逻辑
change.addEventListener("click", (event) => {
  // 校验点击目标是可展开的表格行
  const clickRow = event.target.closest("tr");
  if (clickRow && event.target.tagName === "TD") {
    justUserClicked = true;
    currentActiveId = event.target.id;
    updateItemContent(currentActiveId);
    // 1秒后重置标记，给自动轮询放行
    setTimeout(() => {
      justUserClicked = false;
    }, 1000);
  }
});

// 单独启动定时器，不需要绑定在任何事件回调内
setInterval(() => {
  // 用户刚做了点击操作时跳过本次自动更新，避免重复请求
  if (justUserClicked) return;
  // 直接调用更新方法拉取最新数据即可
  updateItemContent(currentActiveId);
  // 如果需要同步触发表格展开的动画效果，可以找到对应ID的元素触发点击
  // document.getElementById(currentActiveId).click();
}, 40000);

• 上述方案默认轮询更新用户最后一次点击查看的表格项，如果需要轮询所有表格项的内容，把currentActiveId改成ID列表遍历即可。
• 如果希望页面切到后台标签时暂停轮询减少无效请求，可以监听visibilitychange事件，在页面隐藏时清除定时器、页面重新可见时重启定时器。

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