理解setInterval堆叠问题
在javascript中，setinterval函数用于以固定的时间间隔重复执行某个函数或代码块。它返回一个唯一的定时器id，这个id可以被clearinterval函数用来停止对应的定时器。然而，当一个包含setinterval的“启动”方法被多次调用时，如果没有适当的机制来管理，就会出现定时器堆叠的问题。
考虑以下粒子生成器类的示例：
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
}
start() {
// 每次调用都会创建一个新的定时器，并将其ID赋值给 this.spawnManager
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() {
// 只能停止 this.spawnManager 中存储的最后一个定时器ID对应的定时器
clearInterval(this.spawnManager);
}
}在这个ParticleGenerator类中，start()方法负责启动粒子生成定时器。如果start()方法被调用多次，例如：
const generator = new ParticleGenerator(...); generator.start(); // 第一次调用，生成定时器ID 1 generator.start(); // 第二次调用，生成定时器ID 2，this.spawnManager 现在是 2 generator.start(); // 第三次调用，生成定时器ID 3，this.spawnManager 现在是 3 generator.stop(); // 只能停止定时器ID 3
此时，尽管stop()方法被调用，但只有最后一个被创建的定时器（ID 3）会被停止。之前创建的定时器（ID 1和ID 2）仍然在后台运行，继续生成粒子，这导致了预料之外的行为和潜在的性能问题。
解决方案：确保单一活跃定时器
为了解决这个问题，我们需要确保在任何给定时间，只有一个setInterval实例在运行。这可以通过在start()方法中添加一个检查机制来实现：如果定时器已经运行，就先停止它，然后再启动一个新的。
立即学习“Java免费学习笔记（深入）”；
步骤一：初始化定时器管理器
在类的构造函数中，将用于存储定时器ID的变量初始化为null。这有助于明确表示初始状态下没有定时器在运行。
class ParticleGenerator {
constructor(...) {
// ... 其他属性初始化
this.spawnManager = null; // 初始化为null
}
// ...
}步骤二：在start()方法中检查并清除现有定时器
修改start()方法，在创建新的setInterval之前，首先检查this.spawnManager是否已经存在（即不为null）。如果存在，则调用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"]) {
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;
this.spawnManager = null; // 初始化为null
}
start() {
// 如果已经有定时器在运行，先停止它
if (this.spawnManager) {
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() {
// 停止当前存储的定时器ID
clearInterval(this.spawnManager);
this.spawnManager = null; // 清除ID后，将spawnManager设为null，表示没有定时器运行
}
}通过以上修改，每次调用start()方法时，都会先检查this.spawnManager。如果它不为null（表示有定时器在运行），this.stop()会被调用来停止当前活跃的定时器。然后，一个新的定时器才会被创建，并将其ID存储到this.spawnManager中。同时，在stop()方法中，除了清除定时器，我们还将其ID重置为null，确保状态的准确性。这样就保证了在任何时候只有一个setInterval实例在控制粒子生成。
注意事项
- 状态管理的重要性： 正确地管理定时器ID（如this.spawnManager）是避免堆叠的关键。将其初始化为null并在停止后重置为null，有助于清晰地反映定时器的运行状态。
- 幂等性： 这种模式使得start()方法具有幂等性，即多次调用start()与调用一次的效果相同（只启动一个定时器），这增强了代码的健壮性。
- 资源释放： 及时清除不再需要的定时器是良好的编程实践，可以防止内存泄漏和不必要的CPU占用。
总结
通过在setInterval的启动逻辑中引入一个简单的检查和清理机制，我们可以有效防止定时器堆叠问题。这种模式确保了每次只有一个定时器实例在运行，从而使得clearInterval能够可靠地停止当前活跃的定时器。这对于需要精确控制重复操作的应用程序（如游戏中的动画、数据轮询等）至关重要，是构建健壮和高效JavaScript应用的基石。
