JavaScript中防止setInterval重复堆叠的策略与实践

class ParticleGenerator {
  constructor(/* ... */) {
    // ... 其他属性初始化
    this.spawnRate = 100;
    this.spawning = false;
    this.particlesPerSpawn = 1;
    // 缺少对 this.spawnManager 的初始化
  }

  start() {
    // 每次调用都会创建一个新的 setInterval，并覆盖 this.spawnManager
    this.spawnManager = setInterval(() => {
      // ... 粒子生成逻辑
    }, this.spawnRate);
  }

  stop() {
    // 如果 start() 被多次调用，这里只能停止最后一个定时器
    clearInterval(this.spawnManager);
  }
}

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"]) {
    this.parent = pgPhyEngine;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.particleSizeRange = particleSizeRange;
    this.velXRange = velXRange;
    this.velYRange = velYRange;
    this.particleColors = particleColorsArray;
    this.spawnRate = spawnRate;
    this.spawning = false;
    this.particlesPerSpawn = particlesPerSpawn;
    // 关键：初始化 spawnManager 为 null
    this.spawnManager = null; 
  }

  // ... 其他方法
}

class ParticleGenerator {
  constructor(/* ... */) {
    // ...
    this.spawnManager = null; // 确保初始化
  }

  start() {
    // 在启动新定时器之前，检查是否存在旧定时器并停止它
    if (this.spawnManager) {
      this.stop(); // 调用 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() {
    // 清除定时器后，将 spawnManager 重新设置为 null，以表示当前没有运行的定时器
    clearInterval(this.spawnManager);
    this.spawnManager = null; 
  }
}