p5.js - 如何在 p5.js 中等待

Question

我正在尝试创建一个程序来做某事，等待一定的时间再做另一件事，然后再次等待。然而，实际发生的是程序在开始时等待，然后在它们之间没有任何延迟地执行这两件事。

var start, current
function setup() {
  createCanvas(500, 550);
}

function draw() {
  background(220);
  print('a');
  wait(500);
  print('b');
  wait(500);
}

function wait(time)
{
  start = millis()
  do
  {
    current = millis();
  }
  while(current < start + time)
}

Answer 1

draw() 函数每秒执行几次(大约每秒 60 次，请参阅 framerate in the doc )。这也是我们所说的“绘制循环”。

您的逻辑似乎是非常连续的(执行此操作，然后等待，然后执行其他操作...)，也许您应该为您的程序考虑除绘制循环之外的其他流程。

如果你想要动画，简单的答案就是坚持 Rabbid76 提供的答案。(每次 draw 循环执行时读取并比较耗时 millis)。

如果你想要一次性事件(当达到想要的持续时间时只发生一次的事情)，你应该查看 Promises (或 async- await 函数)，也称为异步性。这个主题可能会让初学者感到困惑，但在 javascript 中非常重要。

举个例子:
( link with p5 editor )

// notice we are NOT using the draw() loop here
function setup()
{
  createCanvas(400, 400);
  background('tomato')
  
  // try commenting-out one of these:
  doScheduleThings();
  doAsyncAwaitThings();
}


// you can wait for a Promise to return with the javascript 'then' keyword
// the function execution's is not stopped but each '.then(...)' schedules a function for when the Promise 'sleep(...)' is resolved
function doScheduleThings()
{
  sleep(2000).then(function() {
    fill('orange')
    ellipse(30,30, 50, 50)
  })
  sleep(1000).then(function() {
    fill('yellow')
    ellipse(130,30, 50, 50)
  })
}


// you can also wait for a Promise to return with an async-await function
// the function's execution is stopped while waiting for each Promise to resolve
async function doAsyncAwaitThings()
{
  await sleep(4000)
  fill('blue')
  rect(200,200, 50, 50)
  await sleep(1000)
  fill('cyan')
  rect(300,200, 50, 50)
}


// a custom 'sleep' or wait' function, that returns a Promise that resolves only after a timeout
function sleep(millisecondsDuration)
{
  return new Promise((resolve) => {
    setTimeout(resolve, millisecondsDuration);
  })
}