p5.js中如何正确实现操作间的定时等待与分步执行

错误根因 #

你自己实现的wait()函数属于同步阻塞式忙等逻辑，JavaScript 是单线程运行在浏览器主线程上的，这种在循环里反复读取时间戳直到满足时长的写法，会在等待期间完全占死主线程：

• 等待阶段 p5 无法执行画布渲染、事件响应、帧调度等任何内置逻辑，整个页面处于冻结状态
• 整个执行流程是：进入draw → 打印a → 卡500ms空转 → 打印b → 再卡500ms空转 → 退出本次draw循环

最终呈现的效果就是页面刚加载时，两个打印操作挤在连续的阻塞间隙里跑完，没有自然的流畅间隔，全程页面是卡顿的。

正确实现方式 #

p5 的延时逻辑需要基于非阻塞时间戳判断实现，不要通过卡死主线程来等待，每帧正常运行的前提下，检查距上一次操作的时长是否满足延时要求，满足了再执行对应操作即可。
修正后的参考代码：

let lastTriggerTime = 0; // 记录上一次操作触发的时间
let currentStep = 0; // 标记当前要执行的操作步骤

function setup() {
  createCanvas(500, 550);
  lastTriggerTime = millis(); // 初始化计时起点
}

function draw() {
  background(220);
  // 每帧检查距离上一次触发的时间差
  if (millis() - lastTriggerTime >= 500) {
    // 时间间隔满足要求，执行对应步骤的逻辑
    if (currentStep === 0) {
      print('a');
    } else if (currentStep === 1) {
      print('b');
    }
    // 重置计时，切换到下一个步骤
    lastTriggerTime = millis();
    currentStep = (currentStep + 1) % 2;
  }
}

这个实现的特点：

• 全程不会阻塞主线程，画布可以正常渲染、可以随时响应鼠标键盘等交互
• 两个操作之间保持稳定的500毫秒间隔，运行流畅，和预期的执行流程完全一致
• 不会出现启动时一次性跑完所有等待时长的问题

内容的提问来源于stack exchange，提问作者Ethan Nguyen