为何JavaScript粒子发射器中粒子添加速率高于移除速率？

你的问题出在**addParticle和updateParticles的重复添加逻辑**上：

• addParticle函数内部已经执行了this.particles.push(p)，把新粒子加入了数组
• 而在updateParticles的判断分支里，你又写了this.particles.push(this.addParticle())——这相当于调用一次addParticle已经添加了1个粒子，外面再push一次返回的同一个粒子，等于每移除1个粒子，实际添加了2个，粒子数量自然会越来越多

修正方案 #

方案一：保留addParticle的自动push逻辑 #

只需要去掉updateParticles里多余的push操作，直接调用addParticle即可：

this.updateParticles = function() {
    // 遍历粒子并绘制到屏幕
    for(let i = this.particles.length-1; i >= 0; i--) {
        this.particles[i].drawParticle();
        this.particles[i].updateParticle();
        if (this.particles[i].age > this.lifetime) {
            this.particles.splice(i, 1); // 移除过期粒子
            this.addParticle(); // 直接添加新粒子，无需额外push
        }
    }
}

方案二：让addParticle仅创建粒子，由调用方控制添加 #

修改addParticle，去掉内部的push逻辑，把添加操作交给updateParticles，逻辑更清晰：

this.addParticle = function() {
    return new Particle(
        random(this.x - 10, this.x + 10),
        random(this.y - 10, this.y + 10),
        random(this.xSpeed - 1, this.xSpeed + 1),
        random(this.ySpeed - 1, this.ySpeed + 1),
        random(this.size - 4, this.size + 4),
        this.colour
    );
}

this.updateParticles = function() {
    for(let i = this.particles.length-1; i >= 0; i--) {
        this.particles[i].drawParticle();
        this.particles[i].updateParticle();
        if (this.particles[i].age > this.lifetime) {
            this.particles.splice(i, 1);
            this.particles.push(this.addParticle()); // 这里push才是正确的1:1替换
        }
    }
}

两种方案都能保证移除1个粒子就添加1个，维持粒子数量的平衡。

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