如何实现点击按钮时终止所有带Timeout的运行中JavaScript函数

要实现点击任意按钮时终止所有正在运行的带setTimeout的函数，核心是统一跟踪所有已创建的Timeout ID，然后在每次按钮点击时先清除所有这些超时任务，再执行当前按钮的逻辑。下面是具体的实现方案：

完整代码示例 #

<button id="b1" onclick="f1()">1st button</button>
<button id="b2" onclick="f2()">2nd button</button>
<button id="b3" onclick="f3()">3rd button</button>
<p id="result">"Here will be the result!"</p>

<script>
// 用数组存储所有活跃的Timeout ID，方便统一管理
let activeTimeouts = [];

// 封装清除所有Timeout的工具函数
function clearAllTimeouts() {
  // 遍历终止每个超时任务
  activeTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
  // 清空数组，避免残留无效ID
  activeTimeouts = [];
}

function f1() {
  // 先终止所有正在运行的超时任务
  clearAllTimeouts();
  // 创建新的超时任务，并把ID存入数组
  const timeoutId = setTimeout(() => {
    document.getElementById("result").innerHTML = "You clicked the 1st button!";
  }, 1000);
  activeTimeouts.push(timeoutId);
}

function f2() {
  clearAllTimeouts();
  const timeoutId = setTimeout(() => {
    document.getElementById("result").innerHTML = "You clicked the 2nd button!";
  }, 1500);
  activeTimeouts.push(timeoutId);
}

function f3() {
  clearAllTimeouts();
  const timeoutId = setTimeout(() => {
    document.getElementById("result").innerHTML = "You clicked the 3rd button!";
  }, 2000);
  activeTimeouts.push(timeoutId);
}
</script>

关键逻辑说明 #

• 统一跟踪Timeout ID：用数组activeTimeouts保存所有通过setTimeout生成的超时ID，这样就能对所有活跃的超时任务进行统一管理。
• 一键清除所有超时：clearAllTimeouts函数会遍历数组中的每个ID，调用clearTimeout终止对应的超时任务，同时清空数组避免无效ID残留。
• 按钮执行流程：每个按钮的函数执行前，都会先调用clearAllTimeouts终止所有未完成的超时任务，再创建新的超时任务并将ID存入数组。

这样一来，无论你点击哪个按钮，之前所有还在等待执行的超时任务都会被立即终止，只会执行当前按钮触发的新任务。

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