JavaScript setInterval 运行后出现碰撞失效、卡顿异常如何解决？

触发异常的核心原因 #

• 浏览器定时器节流规则完全匹配故障现象
  当浏览器检测到页面主线程被任务占满、或标签页进入低活跃状态时，会自动将所有setInterval的最低执行间隔强制限制为1000ms（即1秒），和你观察到的“生成间隔变1秒一次”的表现完全吻合。碰撞检测失效不是逻辑被删除，是因为主线程任务队列堆积太多，碰撞检测的回调排不上队，根本跑不完完整的检测逻辑。
• 定时器未做注销，造成实例泄漏
  你当前的startGame函数依赖isMouseUp状态防止重复生成定时器，但如果玩家快速重复点击开始按钮、或触发游戏重启/重开逻辑时没有手动清理旧的定时器实例，就会不断生成新的同类型定时器。运行几十秒后主线程堆积几十上百个间隔几十毫秒的回调，直接填满事件循环排期队列，触发浏览器的节流保护机制，把所有定时器统一降到1秒执行频率，同时挤占碰撞检测的执行资源。
• 游戏对象数组只追加不清理
  你代码里的bulletArray、lifeArray、shootArray如果没有在对象移出屏幕、被销毁时做移除操作，数组长度会随游戏运行线性膨胀。运行1分钟后数组可能攒到几千个无效元素，每次碰撞检测都要做全量遍历，单次回调执行时间从几毫秒涨到几百毫秒，直接堵死主线程，最终触发浏览器的定时器降级节流。

具体修复操作 #

• 所有游戏逻辑相关的定时器，在游戏开始、重启、结束的节点，必须先调用clearInterval清空所有已存的定时器ID，再重新初始化新的定时器。不要仅靠状态变量判断防重复初始化，状态一旦因为异常逻辑没被正确重置，就会直接产生定时器泄漏。
  参考改造后的初始化逻辑：

  // 游戏启动前先清空所有残留的定时器实例，避免重复累加
  clearInterval(spawn)
  clearInterval(time)
  clearInterval(spawnLivesVariable)
  clearInterval(shootFunction)
  clearInterval(damageCheck)
  clearInterval(oneUpCheck)
  clearInterval(shootCheck)
  
  loadTime = Date.now();
  if (!isEndlessOn) {
    spawn = setInterval(spawnEnemy, 100);
    time = setInterval(startTimer, 100)
  } else {
    spawn = setInterval(endlessSpawn, 150);
    time = setInterval(startTimer, 100)
    spawnLivesVariable = setInterval(spawnLives, 10000);
    shootFunction = setInterval(spawnBullets, 75);
  }
  // 将三个碰撞检测的定时器ID存在全局变量中，方便后续统一清理
  damageCheck = setInterval(damage, 50)
  oneUpCheck = setInterval(oneUp, 50)
  shootCheck = setInterval(shooting, 50)
  

• 所有游戏对象数组，在对象移出可视区域、完成碰撞销毁时，立刻从对应数组中移除元素，保证数组长度始终和当前屏幕实际存在的对象数一致，不要让无效元素长期堆积。
• 不要拆分多个独立setInterval承载游戏逻辑。将对象生成、移动、碰撞检测逻辑统一合并到requestAnimationFrame主循环中，用帧间隔时间差判断是否要执行对应生成/检测逻辑，从根源上避免多定时器挤占主线程、被浏览器节流的问题。

问题验证方法 #

• 打开浏览器开发者工具的Performance面板，录制10秒的游戏运行过程，检查主线程是否堆积了大量重复的setInterval回调、是否存在大数组遍历导致的长任务。
• 在碰撞检测函数的开头、结尾分别打印日志，观察故障触发时，回调是否还能完整执行，还是执行到一半就被其他任务打断。

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