JavaScript自动点击器仅触发单个按钮，如何实现依次点击两个按钮？

我正在尝试用JavaScript开发自动点击器，需要依次点击两个不同按钮，两次点击间隔1秒。但运行代码时仅能触发其中一个按钮的点击事件，该如何修复？

按钮HTML代码 #

<button class="btn-primary">Button 1</button>
<button class="btn-secondary">Button 2</button>

当前JavaScript代码 #

var elements = document.getElementsByClassName('btn-primary');
setInterval(function(){
  for (var i=0;i<elements.length; i++) {
      elements[i].click();
  }
},1000)

var elements = document.getElementsByClassName('btn-secondary');
setInterval(function(){
  for (var i=0;i<elements.length; i++) {
      elements[i].click();
  }
},1000)

你当前的代码用了两个独立的setInterval定时器，它们会同时启动，每隔1秒各自点击对应按钮。这既不符合“依次点击、间隔1秒”的需求，还会因为两个定时器并行运行，导致视觉上看起来只有一个按钮在触发点击，另外重复声明的elements变量也会覆盖之前的取值，属于不良写法。

要实现先点击Button1，间隔1秒后点击Button2的效果，需要把两个点击操作串成一个执行序列，用setTimeout控制间隔，再根据需求选择单次执行或循环执行：

方案1：单次依次点击（仅执行一次序列） #

// 获取两个按钮元素
const btn1 = document.querySelector('.btn-primary');
const btn2 = document.querySelector('.btn-secondary');

// 先触发Button1的点击
btn1.click();
// 间隔1秒后触发Button2的点击
setTimeout(() => {
  btn2.click();
}, 1000);

方案2：循环依次点击（重复执行整个序列） #

如果需要不断重复“点击Button1 → 间隔1秒 → 点击Button2 → 间隔1秒 → 再次点击Button1...”的循环，可以用递归实现：

function clickButtonsLoop() {
  const btn1 = document.querySelector('.btn-primary');
  const btn2 = document.querySelector('.btn-secondary');
  
  // 点击Button1
  btn1.click();
  // 1秒后点击Button2，再过1秒重复整个序列
  setTimeout(() => {
    btn2.click();
    setTimeout(clickButtonsLoop, 1000);
  }, 1000);
}

// 启动循环
clickButtonsLoop();

补充说明 #

• 用document.querySelector替代getElementsByClassName，更适合当前单个按钮的场景；如果有多个同类型按钮，可改用document.querySelectorAll遍历点击。
• 避免重复声明同名变量，防止变量覆盖导致的逻辑混乱。

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