p5.js中如何实现代码执行延迟 类似Scratch的Wait等待指令效果

p5.js的draw()函数默认以每秒60次的频率连续执行，直接使用普通延迟函数会因为重复调用出现逻辑异常，以下是3种稳定的实现方案：

方案1：通过帧计数控制更新速率 #

适合动画速率和帧率绑定的场景，不需要额外计算时间，实现最简单：

// 全局变量定义
let Xoffset = 0;
// 每N帧执行一次更新，数值越大更新速度越慢
const updateIntervalFrame = 2;

function draw() {
  // 只有帧计数是设定间隔的倍数时才更新数值
  if (frameCount % updateIntervalFrame === 0) {
    Xoffset = Xoffset + 1.5;
  }
  // 其余渲染逻辑
}

你也可以直接通过p5内置的frameRate()全局修改draw()的执行帧率，比如在setup()中添加frameRate(10)，即可让draw()每秒仅执行10次，数值变化速率自然会下降，但该修改会影响所有渲染逻辑的帧率，仅适合简单场景使用。

方案2：通过时间戳控制等待时长 #

最接近Scratch的Wait()效果，灵活性最高，不会影响其他渲染逻辑的帧率，优先推荐使用：

// 全局变量定义
let Xoffset = 0;
let lastUpdateTime = 0;
// 自定义等待时长，单位为毫秒，2000即对应等待2秒
const waitDuration = 2000;

function draw() {
  const currentTime = millis();
  // 距离上次更新的时长超过设定值时才执行更新
  if (currentTime - lastUpdateTime >= waitDuration) {
    Xoffset = Xoffset + 1.5;
    // 重置上次更新的时间戳
    lastUpdateTime = currentTime;
  }
  // 其余渲染逻辑
}

方案3：async/await封装同步风格延迟 #

适合需要线性执行逻辑、单次等待的场景，需要加锁避免重复触发：

// 全局变量定义
let Xoffset = 0;
let isWaiting = false;

async function draw() {
  // 等待过程中直接跳过执行，避免重复触发延迟
  if (isWaiting) return;
  isWaiting = true;

  Xoffset = Xoffset + 1.5;
  // 等待2秒后才会执行后续逻辑
  await new Promise(resolve => setTimeout(resolve, 2000));

  isWaiting = false;
  // 其余渲染逻辑
}

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