关于start/stop按钮创建多个main函数实例的问题求助

你遇到的核心问题是每次点击start按钮都会调用一次main()，而且没有做“防止重复启动”的校验，所以多次点击后会同时存在多个main函数的执行实例，各自输出日志。下面给你几个实用的解决方案：

方案1：用全局状态变量标记运行状态 #

在代码里加一个状态变量，用来记录main是否正在执行。修改start函数，只有当main没在运行的时候才调用它：

// 全局状态变量，标记main是否处于运行状态
let isMainRunning = false;

$('#Jquery w/e').click(function() {
  // some other side effects
  if (stopped) {
    start()
  } else {
    stop()
  }
})

function start() {
  // some more unrelated side effects
  // 先判断main是否已经在运行，避免重复调用
  if (!isMainRunning) {
    isMainRunning = true;
    main()
  }
}

function stop() {
  // undo side effects
  // 停止时重置运行状态
  isMainRunning = false;
}

function main() {
  // 假设main是持续运行的逻辑（比如定时器）
  const intervalId = setInterval(() => {
    // 你的业务逻辑
    if (stopped) {
      clearInterval(intervalId);
      isMainRunning = false; // 执行结束后记得重置状态
    }
  }, 1000);
}

方案2：从UI层面禁用start按钮 #

另一种更直观的方式是，点击start后直接禁用按钮，直到点击stop后再恢复可用，从根源上阻止重复点击：

$('#Jquery w/e').click(function() {
  const $btn = $(this);
  // some other side effects
  if (stopped) {
    $btn.prop('disabled', true); // 禁用按钮，防止重复点击
    start()
  } else {
    $btn.prop('disabled', false); // 恢复按钮可用状态
    stop()
  }
})

function start() {
  // some more unrelated side effects
  main()
}

function stop() {
  // undo side effects
  // 如果stop是通过其他方式触发的，也要记得恢复按钮状态
  $('#Jquery w/e').prop('disabled', false);
}

方案3：终止之前的main实例（按需选择） #

如果你的main函数是可终止的逻辑（比如包含定时器、异步请求），可以在启动新实例前，先终止上一个正在运行的实例：

let mainInstance = null; // 存储当前main的实例标识（比如定时器ID）

function start() {
  // some more unrelated side effects
  // 先终止之前的实例
  if (mainInstance) {
    clearInterval(mainInstance); // 以定时器为例，清除之前的实例
    // 如果是其他类型的实例（比如Promise），执行对应的终止操作
  }
  mainInstance = main(); // 让main返回实例标识，方便后续管理
}

function main() {
  // 返回定时器ID，供外部终止使用
  return setInterval(() => {
    // 你的业务逻辑
    if (stopped) {
      clearInterval(mainInstance);
      mainInstance = null;
    }
  }, 1000);
}

这样不管点击多少次start，都会先停掉之前的main实例，再启动新的，就不会出现多份日志输出的情况了。

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