如何在JavaScript中停止失控的setInterval()计时器？及鼠标事件挂起问题

1. 如何在JavaScript中停止失控的setInterval()计时器？ #

咱先把核心点说透：要停止setInterval，必须保留它返回的计时器ID——这是清除它的唯一凭证，没了它就像丢了钥匙，根本关不上这个“计时器开关”。

具体操作分这几步：

• 首先，创建计时器时一定要把返回的ID存起来，别随手丢了：

  // 把计时器ID存在变量里，别让它凭空消失
  const timerId = setInterval(() => {
    console.log('计时器正在运行');
  }, 1000);
  

• 要停止时，直接调用clearInterval(timerId)就行，这就相当于用钥匙锁上门：

  clearInterval(timerId);
  

如果真的失控了——比如你没保存ID，那也有几个应急办法（但都是下策，最好还是提前做好管理）：

• 最直接的：刷新页面，所有计时器都会被清除，但这会重置页面状态；
• 暴力遍历：如果你知道大致的ID范围，比如从1到1000，循环调用clearInterval(i)，但这会干掉所有计时器，可能影响其他功能；
• 提前规划：平时写代码时，用一个对象或者数组来统一管理所有计时器ID，比如const timers = {}，创建时存进去，清除时从里面取，这样就不会丢了。

2. 按住鼠标左键并依次按下右键后，setInterval无法清除的问题分析与解决 #

看了你的代码，问题出在鼠标事件的触发逻辑和浏览器默认行为的干扰上。咱拆解一下：
当你按住左键时，元素的mousedown触发，计时器已经创建；之后按下右键，右键的mousedown事件要么没被当前元素捕获（因为鼠标已经按住左键，状态特殊），要么被浏览器的右键菜单默认事件打断，导致你的clearInterval(timer)根本没执行，计时器就一直跑着了。

给你几个针对性的修复方案：

方案一：绑定右键菜单事件，阻止默认行为 #

右键按下时会触发contextmenu事件，我们可以监听这个事件，同时阻止默认的右键菜单弹出，确保清除逻辑执行：

let timer = 0;
const elem = document.getElementById('c_3');

// 只有左键按下时才创建计时器
elem.onmousedown = function(e) {
  if (e.which === 1) { // e.which=1代表左键
    timer = setInterval(myFunction, 30);
  }
};

// 监听右键菜单事件，清除计时器
elem.oncontextmenu = function(e) {
  e.preventDefault(); // 阻止右键菜单弹出，避免干扰
  clearInterval(timer);
};

// 再加个鼠标松开事件，确保左键松开时也停掉计时器
elem.onmouseup = function() {
  clearInterval(timer);
};

方案二：优化计时器状态，避免重复创建 #

创建新计时器前先清除旧的，防止多个计时器叠加，同时确保右键按下时能正确清除：

let timer = 0;
const elem = document.getElementById('c_3');

elem.onmousedown = function(e) {
  if (e.which === 1) {
    // 先清掉旧的，再创建新的，避免重复
    clearInterval(timer);
    timer = setInterval(myFunction, 30);
  } else if (e.which === 3) { // 右键按下时直接清除
    clearInterval(timer);
  }
};

// 全局监听鼠标松开，防止鼠标离开元素后计时器还在跑
document.onmouseup = function() {
  clearInterval(timer);
};

方案三：追踪鼠标按键状态，更稳健的控制 #

通过变量记录左键是否按住，确保任何时候只要左键松开或者右键按下，都能停掉计时器：

let isLeftDown = false;
let timer = 0;
const elem = document.getElementById('c_3');

elem.onmousedown = function(e) {
  if (e.which === 1) {
    isLeftDown = true;
    timer = setInterval(myFunction, 30);
  } else if (e.which === 3) {
    isLeftDown = false;
    clearInterval(timer);
  }
};

// 鼠标离开元素时，强制停掉计时器
elem.onmouseleave = function() {
  isLeftDown = false;
  clearInterval(timer);
};

// 全局鼠标松开，确保左键松开时停掉
document.onmouseup = function(e) {
  if (e.which === 1) {
    isLeftDown = false;
    clearInterval(timer);
  }
};

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