设置粒子生成器循环持续时间的方法帮助和停止函数循环的方法

Question

我正在使用 Pixi.js 在画布上生成一些粒子，但我需要粒子仅生成一段时间（3 秒）。

我创建了一个生成粒子的循环函数，但我不知道如何在一段时间后结束它的生成：

var particles = []; 

function spawnFountain(){
    var particle = new PIXI.Sprite.from('./Assets/particle.png');
    app.stage.addChild(particle);
    particles.push(particle);
  
    setTimeout( () => {
        spawnFountain();
    },10)
}

我需要这个函数在 3 秒后停止生成。

Answer 1

var particles = []; 

function spawnFountain(){
    var particle = new PIXI.Sprite.from('./Assets/particle.png');
    app.stage.addChild(particle);
    particles.push(particle);
}

var intervalStart = new Date();
var interval = setInterval(() => {
    var now = new Date();

    if (now - intervalStart > 3000) { // 3 seconds
      clearInterval(interval);
      return;
    }

    spawnFountain();
}, 10)

您需要使用 setInterval 和 clearInterval 的组合来启动和停止生成循环。跟踪粒子生成的开始时间和当前时间，您可以确定间隔何时结束。

这就是使代码正常工作的方法。然而，这种生成精灵粒子的方法效率相当低，并且可能最终会导致性能问题。对于这个问题，请考虑使用 pixi-articles 之类的模块。