JavaScript中setTimeout绑定函数未按预期重复执行问题求助

你的代码之所以只在初始阶段触发几次（实际是10次几乎同时执行），之后按钮重新出现也不再触发，核心问题有两个：

1. 定时器创建逻辑错误：你用for循环一次性创建了10个setTimeout，每个都设置为1秒后执行。这意味着1秒后这10次检查会扎堆跑完，之后就没有后续的定时任务了，完全不是你想要的「每秒执行一次检查」的效果。
2. 缺少DOM变化感知机制：当按钮从DOM中消失后再重新出现，你的代码没有任何机制能感知到这个变化，自然不会重新触发检查逻辑。

下面给你两种可行的解决方案：

方案一：用setInterval实现持续轮询 #

这种方式简单直接，每秒主动检查一次DOM中是否存在目标按钮，存在就执行点击：

function findButton() {
  return document.getElementsByClassName("button--outlined")[0] !== undefined;
}

function clickButton() {
  const button = document.getElementsByClassName("button--outlined")[0];
  if (button) button.click();
}

// 启动每秒一次的检查任务
const checkInterval = setInterval(() => {
  if (findButton()) clickButton();
}, 1000);

// 若需要在特定条件下停止轮询，可调用：
// clearInterval(checkInterval);

方案二：用MutationObserver监听DOM变化（更高效） #

轮询会持续消耗资源，用MutationObserver可以精准监听DOM的变化，只有当按钮可能出现/消失时才触发检查，性能更优：

function findAndClickButton() {
  const button = document.getElementsByClassName("button--outlined")[0];
  if (button) {
    button.click();
    console.log("按钮已点击");
  }
}

// 创建DOM变化监听器
const observer = new MutationObserver(() => {
  // 每次DOM发生变化时，检查并点击按钮
  findAndClickButton();
});

// 配置监听范围（这里监听整个body的子节点变化，可缩小到按钮的父元素提升性能）
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

// 页面加载完成后先执行一次初始检查
findAndClickButton();

// 若需要停止监听，可调用：
// observer.disconnect();

额外优化建议 #

• 每次检查时缓存DOM查询结果，避免重复调用document.getElementsByClassName（上面的示例已做优化）。
• 如果按钮点击后会立即消失，可以在点击后暂时暂停检查，避免无效重复操作。

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