Chrome控制台中JavaScript有时执行两次的原因及解决方案

嘿，我来帮你拆解下这个问题：

为什么会出现执行两次的情况？ #

最常见的原因就是你不小心多次触发了setInterval的创建代码——比如在控制台重复粘贴代码、按回车，或者页面某些操作（比如刷新后重新执行代码）导致这段定时器创建逻辑被运行了不止一次。每执行一次就会生成一个独立的定时器，多个定时器同时跑，自然就会出现逻辑被执行两次的情况。

另外还有个小概率可能：如果你的document.getElement...写成了document.getElementsBy...（多了个s），那会获取到一组元素，后续的比较或点击逻辑可能会遍历执行，但看你的代码片段是getElement，这个可能性很低。

不用移除setInterval/if的解决方案 #

我们可以通过确保全局只有一个定时器在运行，或者给逻辑加执行锁的方式来解决，完全不用移除你想用的定时器或判断语句：

方案1：用全局变量控制定时器唯一性 #

声明一个全局变量存储定时器ID，只有当这个变量为空时才创建新的定时器，避免重复创建：

// 全局变量存储定时器ID，初始为null
let myTimer = null;

// 只有当定时器未被创建时才初始化
if (!myTimer) {
  myTimer = setInterval(function() {
    // 你的原有逻辑：获取数值、比较、点击按钮
    var time = document.getElementById('time-element').textContent;
    if (parseInt(time) >= 60) { // 示例条件，根据你的实际需求调整
      document.getElementById('target-btn').click();
    }
  }, 1000); // 你的定时器间隔，比如1秒
}

就算你多次在控制台执行这段代码，也只会生成一个定时器——第二次执行时myTimer已经有值了，不会再创建新的。

方案2：创建前清除旧定时器（更稳妥） #

如果担心页面刷新、代码重复执行导致旧定时器残留，可以在创建新定时器前先清除已有的：

let myTimer = null;

// 先清除可能存在的旧定时器
if (myTimer) {
  clearInterval(myTimer);
}
// 再创建新的定时器
myTimer = setInterval(function() {
  var time = document.getElementById('time-element').textContent;
  if (parseInt(time) >= 60) {
    document.getElementById('target-btn').click();
  }
}, 1000);

这样每次执行代码都会先终止旧的定时器，再启动新的，确保始终只有一个定时器在工作。

方案3：加执行锁防止单次间隔内重复执行 #

如果是因为页面卡顿、定时器回调延迟导致同一次间隔内逻辑被多次触发，可以加个执行标记锁：

let myTimer = null;
let isRunning = false; // 标记当前是否正在执行逻辑

if (!myTimer) {
  myTimer = setInterval(function() {
    // 如果正在执行，直接跳过本次回调
    if (isRunning) return;
    
    isRunning = true;
    // 你的原有逻辑
    var time = document.getElementById('time-element').textContent;
    if (parseInt(time) >= 60) {
      document.getElementById('target-btn').click();
    }
    // 执行完毕后解锁
    isRunning = false;
  }, 1000);
}

这个方法能避免在定时器的间隔周期内，因为各种异常情况导致逻辑被重复执行。

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