Javascript p5.js使用setInterval、array.push（）进行循环创建动画时出现问题

使用

setInterval

，

array.push（）

，对于循环，我希望每隔3秒出现一个气泡，直到数组气泡的长度变为10

但是，当我执行代码时，一次总共出现10个气泡，

console.log（array.length）

显示长度正在增长，尽管我将其设置为小于10。 我想我的代码安排有问题，有人能帮忙吗

让气泡=[]；
var n=10；
函数设置（）{
createCanvas（600400）；
}
函数addBubbles（）{
for（设i=0；i

---

您的代码中存在一些问题

问题1: 每次绘制画布时，您将开始10个间隔。每个间隔将每3秒运行一次功能。这会很快（以指数形式）给你带来很多泡沫

要每3秒添加一个气泡，只需开始一个间隔。您可以在

设置中执行此操作，因为它只调用一次

您可以在
addBubble
函数中添加一个复选框，一旦出现一定数量的气泡，该复选框将取消间隔

问题2:
调用
setInterval（）
时，您没有将函数作为参数传递

您已经通过了
气泡。按（b）
作为每3秒运行一次的函数<代码>气泡。推送（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();
  }
}

---

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

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

for（设i=0；i

通过这种方式，addBubbles（）方法将随着增量每3000毫秒执行一次