p5.j​​s 使用 setInterval、array.push()、for 循环创建动画时出现

Question

使用setInterval, array.push(), for 循环，我希望每3 秒出现一个气泡，直到数组气泡的长度变为10。但是，当我执行我的代码时，一次总共出现了10个气泡，并且console.log(array.length)表明长度正在增长，尽管我将它设置为小于10。我认为我的代码排列方式有问题，有人可以帮忙吗？let bubbles = [];var n = 10;function setup() {    createCanvas(600, 400);}function addBubbles() {    for (let i = 0; i < n; i++) {        let x = random(50, 550);        let y = random(50, 350);        let r = random(10, 50);        let b = new Bubble(x, y, r);        setInterval(bubbles.push(b), 3000);    }}function draw() {    background(0);    addBubbles();    for (let i = 0; i < n; i++) {      bubbles[i].show();      bubbles[i].move();    }}class Bubble {    constructor(_x, _y, _r, _c) {        this.x = _x;        this.y = _y;        this.r = _r;        this.c = _c;    }    move() {        this.x = this.x + random(-5, 5);        this.y = this.y + random(-5, 5);    }    show() {        stroke(255);        noFill();        strokeWeight(4);        ellipse(this.x, this.y, this.r * 2);    }}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

我可以看到你已经准确地实现了 setInterval() 方法，并且根据你组织代码的方式，你得到的结果是相当公平的，因为你的 addBubbles() 方法是在 FOR 循环有机会执行之前执行的开始，这就是为什么你会一次得到 10 个气泡。我建议你像这样在循环中抛出 addBubbles() 方法：

 for (let i = 0; i < n; i++) {

    addBubbles();

  }

这样，您的 addBubbles() 方法将随着增量每 3000 毫秒执行一次。

Answer 2

您的代码中存在一些问题。

问题 1： 每次绘制画布时，都会开始 10 个间隔。这些间隔中的每一个都将每 3 秒运行一次函数。这会很快（并且成倍地）给你很多泡沫。

要每 3 秒添加 1 个气泡，您只需启动 1 个间隔。您可以在您的setup函数中执行此操作，因为它只被调用一次。

您可以在addBubble函数中添加一个检查，一旦您有一定数量的气泡，它将取消间隔。

问题 2： 在调用setInterval().

您已bubbles.push(b)作为每 3 秒运行一次的函数传递。bubbles.push(b)不返回函数类型。

bubbles.push我们将传递一个向数组添加气泡的函数，而不是传递 的返回值。

问题 3：n在绘制画布时，您 只需要迭代(10) 个气泡。相反，您需要遍历所有这些。

let bubbles = [];

let maxBubbles = 10;

let interval;

funtion setup() {

  createCanvas(600, 400);

  interval = setInterval(addBubble, 3000);

}

function addBubble() {

  let x = random(50, 550);

  let y = random(50, 350);

  let r = random(10, 50);

  let b = new Bubble(x, y, r);

  bubbles.push(b);

  if (bubbles.length >= maxBubbles) {

    clearInterval(interval);

  }

}

function draw() {

  background(0);

  for (let bubble of bubbles) {

    bubble.show();

    bubble.move();

  }

}