在For循环中按顺序创建p5.js实例，但仅在前一个实例完成后创建

在p5.js中，如果你想在for循环中按顺序创建实例，并且希望每个实例在前一个实例完全初始化之后再开始创建，你可以使用异步编程技术来实现这一点。p5.js的setup()函数是在页面加载时只执行一次的初始化函数，而draw()函数则会在每一帧绘制时重复调用。

由于JavaScript是单线程的，如果你在for循环中同步创建p5.js实例，那么它们会几乎同时开始初始化，这可能不是你想要的效果。为了按顺序创建，你可以使用async/await语法来确保每个实例在前一个实例完成后才开始创建。

以下是一个简单的示例代码，展示了如何按顺序创建p5.js实例：

let p5Instances = [];

function setup() {
  createCanvas(400, 400);
  // 假设我们想要创建5个p5.js实例
  let numberOfInstances = 5;

  // 使用async函数来确保按顺序创建实例
  async function createInstancesSequentially() {
    for (let i = 0; i < numberOfInstances; i++) {
      let sketch = async function(p) {
        p.setup = function() {
          // 初始化代码
        };
        p.draw = function() {
          // 绘制代码
        };
      };
      let instance = await new Promise((resolve) => {
        let p5Instance = new p5(sketch, 'p5-instance-' + i);
        p5Instance.then((instance) => {
          resolve(instance);
        });
      });
      p5Instances.push(instance);
    }
  }

  // 开始创建实例
  createInstancesSequentially();
}

在这个示例中，我们定义了一个createInstancesSequentially的异步函数，它使用for循环来按顺序创建p5.js实例。每个实例都是在一个Promise中创建的，这样我们就可以使用await关键字来等待每个实例完成初始化。

请注意，这个示例假设p5.js实例的创建是异步的，并且可以通过.then()方法来获取实例。实际上，p5.js的构造函数可能不是返回Promise的，因此你可能需要根据实际情况调整代码。

如果你遇到了问题，比如实例没有按顺序创建，可能是因为JavaScript的执行是并发的，或者是因为p5.js实例的初始化不是同步完成的。确保你的代码逻辑正确处理了异步操作，并且每个实例都正确地在前一个实例完成后才开始创建。

参考链接：