假设这是一个使用setup和draw的p5.js配置，draw函数的执行速度高达30/60 FPS，因此您不必手动调用setTimeout来触发更改。相反，您可以将当前的millis()与以前的millis()进行比较，以了解自上次调用draw()以来所经过的时间。
下面是一个尝试使用p5.js而不使用setTimeout执行交通灯动画的示例：

let trafficFirstLightColor = 'black';
let trafficSecondLightColor = 'black';
let trafficThirdLightColor = 'black';
let start;

function setup() {
  createCanvas(400, 400);
  trafficFirstLightColor = 'black';
  trafficSecondLightColor = 'black';
  trafficThirdLightColor = 'black';
  start = millis();
}

function draw() {
  fill(trafficFirstLightColor);
  ellipse(315, 40, 20, 20);
  fill(trafficSecondLightColor);
  ellipse(315, 40 + 25 * 1, 20, 20);
  fill(trafficThirdLightColor);
  ellipse(315, 40 + 25 * 2, 20, 20);
  
  const now = millis();
  const cycle = now - start;
  
  if (cycle < 3000) {
    if (trafficFirstLightColor === 'black' &&
    trafficSecondLightColor === 'black' &&
    trafficThirdLightColor === 'black') {
      trafficFirstLightColor = 'red';
      return;
    }
  } else if (cycle < 6000) {
    if (trafficFirstLightColor === 'red') {
      trafficFirstLightColor = 'black';
      trafficSecondLightColor = 'yellow';
      return;
    }
  } else if (cycle < 9000) {
    if (trafficSecondLightColor === 'yellow') {
      trafficSecondLightColor = 'black';
      trafficThirdLightColor = 'green';
      return;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

当你处理多个值时，使用一个数据结构，而不是thing1，thing2，thing3 ...。在这种情况下，我们可以创建一个数组，其中包含3个包含颜色和持续时间属性的对象，然后循环数组或使用索引在渲染灯光时遍历灯光。

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  },
];

function setup() {
  createCanvas(50, 50);
  noStroke();
  noLoop();
  renderLights();
}

const renderLights = () => {
  clear();
  const {duration, color} = lights[0];
  fill(color);
  ellipse(width / 2, height / 2, width, height);
  setTimeout(renderLights, duration);
  lights.push(lights.shift());
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

代码不仅泛化得很好（您可以随意添加和删除灯光），而且通过分离配置和实现逻辑，可以更容易地调整持续时间，而不会在代码中出现混乱。
如果您的画布在draw中的每一帧上都被清除，则可以将灯光循环与绘图分开：

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  },
];

function setup() {
  createCanvas(50, 50);
  noStroke();
  runLightCycle();
}

function draw() {
  background(0);
  renderCurrentLight();
}

const renderCurrentLight = () => {
  fill(lights[0].color);
  ellipse(width / 2, height / 2, width, height);
};

const runLightCycle = () => {
  setTimeout(() => {
    lights.push(lights.shift());
    runLightCycle();
  }, lights[0].duration);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

请记住，setTimeout是一个粗略的估计，而不是一个精确的持续时间，所以这将随着时间的推移而漂移。
如果你想避免漂移，你可以跟踪最后一次灯光变化的时间，然后反复检查自最后一次灯光变化以来所经过的毫秒数。当它超过当前灯光持续时间时，将上次更改时间增加持续时间并重复。
如果要一次渲染所有灯光而不是更改单个灯光的颜色，可以添加循环：

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  },
];
let currentLight = 0;
const lightSize = 50;

function setup() {
  createCanvas(lightSize, lightSize * lights.length);
  noStroke();
  noLoop();
  renderLights();
}

const renderLights = () => {
  clear();
  lights.forEach((e, i) => {
    fill(i === currentLight ? e.color : "black");
    ellipse(
      lightSize / 2,
      lightSize / 2 + i * lightSize,
      lightSize,
      lightSize
    );
  });
  setTimeout(renderLights, lights[currentLight].duration);
  currentLight = ++currentLight % lights.length;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>