如何避免重复调用start()时setInterval堆叠导致无法停止的问题？

你的问题出在多次调用start()时，旧的定时器ID被新的覆盖。每次调用start()都会生成一个新的定时器，并把this.spawnManager替换成新的ID，之前的定时器ID就丢失了，所以stop()只能清除最后创建的那个定时器，剩下的定时器会继续运行。

下面提供两种靠谱的修复方式：

方案1：启动前先停止已有定时器（推荐） #

如果业务场景不需要同时运行多个定时器，在start()开头先调用stop()，确保每次只有一个定时器在运行：

class ParticleGenerator {
  // 构造函数部分不变，省略...

  start() {
    // 启动前先停止已有定时器，避免重复创建
    this.stop();
    this.spawnManager = setInterval(() => {
      for (var i = 0; i < this.particlesPerSpawn; i++) {
        this.parent.createParticle((this.x - this.width / 2) + (random(0, this.width)), (this.y - this.height / 2) + (random(0, this.height)), random(this.particleSizeRange.min, this.particleSizeRange.max), pickRandomItemFromArray(this.particleColors), true, random(this.velXRange.min, this.velXRange.max), random(this.velYRange.min, this.velYRange.max));
      }
    }, this.spawnRate);
  }

  stop() {
    clearInterval(this.spawnManager);
    // 可选：清除后重置变量
    this.spawnManager = null;
  }
}

方案2：用数组存储所有定时器ID（支持多定时器场景） #

如果确实需要同时运行多个定时器，用数组保存每个定时器的ID，stop()时遍历数组逐个清除：

class ParticleGenerator {
  constructor(pgPhyEngine, x, y, width, height, particleSizeRange = {
    min: 3,
    max: 10
  }, spawnRate = 100, particlesPerSpawn = 1, velXRange = {
    min: -15,
    max: 15
  }, velYRange = {
    min: -15,
    max: 15
  }, particleColorsArray = ["#ff8000", "#808080"]) {
    // 原有构造函数内容不变，新增数组存储定时器ID
    this.spawnManagers = [];
    // ...其他属性
  }

  start() {
    const timerId = setInterval(() => {
      for (var i = 0; i < this.particlesPerSpawn; i++) {
        this.parent.createParticle((this.x - this.width / 2) + (random(0, this.width)), (this.y - this.height / 2) + (random(0, this.height)), random(this.particleSizeRange.min, this.particleSizeRange.max), pickRandomItemFromArray(this.particleColors), true, random(this.velXRange.min, this.velXRange.max), random(this.velYRange.min, this.velYRange.max));
      }
    }, this.spawnRate);
    // 将新定时器ID加入数组
    this.spawnManagers.push(timerId);
  }

  stop() {
    // 遍历数组清除所有定时器
    this.spawnManagers.forEach(timerId => clearInterval(timerId));
    // 清空数组
    this.spawnManagers = [];
  }
}

• 可以给start()加状态判断，用this.spawning变量标记是否正在运行，避免重复调用（方案1已隐含这个效果，方案2可以手动添加）：

  start() {
    if (this.spawning) return;
    this.spawning = true;
    // ...创建定时器逻辑
  }
  stop() {
    // ...清除定时器逻辑
    this.spawning = false;
  }
  

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