javascript - 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 毫秒执行一次，同时递增。