使用 setTimout() 在 Processing.js 中创建延迟不起作用答案

【问题标题】：Creating a delay in Processing.js with setTimout() won't work使用 setTimout() 在 Processing.js 中创建延迟不起作用
【发布时间】：2013-12-31 12:27:37
【问题描述】：

我正在编写一个小型 javascript 应用程序，用于模拟绕圈传递书籍。代码可以在这里找到：http://anura28.github.io/HCF/

如果一个盒子收到这本书，它是绿色的。

目前，当您单击一个数字时，传递书本身并不是很明显。相反，每个将收到这本书的盒子都会同时突出显示。这是因为我还没有弄清楚如何在一个盒子被涂成绿色和下一个盒子被识别之间产生延迟。

这是绘制绿色框的代码：

void drawGreenSquares(int number)
{
  userDefinedSetup();

  int hcf = gcd(totalBoxes, number);
  int i;
  float theta;
  float arclength = 0;
  float boxSize = 0.036615134 * width;
  float radius = ((totalBoxes) * (boxSize))/ (2 * PI);
  //  start = millis();
  for (i = 0; i < (totalBoxes/hcf) ; i++)
  {
    theta = (arclength * number)/ radius;
    pushMatrix();
    translate(width/2, height/2);
    translate(radius*cos(theta), radius*sin(theta));
    rotate(theta);
    fill(156, 255, 0, 100);
    rectMode(CENTER);
    rect(0, 0, boxSize, boxSize);
    popMatrix();
    arclength += boxSize;
  }
}

setTimeout(function(){ }, delay) 在处理“{ is unexpected}”时抛出错误

如何在绘制每个绿色矩形之间产生延迟？

我的其余代码可以在https://github.com/anura28/anura28.github.com/blob/master/HCF/jam_modulus.pde找到

【问题讨论】：

标签： javascript delay settimeout processing.js

【解决方案1】：

我认为您以不支持的方式将 js 与 Processing 混合在一起。我从来没有亲自使用 setTimout 函数来完成这种任务。以下是您在执行此操作时应该考虑的事项：

如果你想要的是盒子的“渐变”着色，那么你想要做的是从你的起始颜色到结束设置一个颜色渐变，并在每一步逐渐增加它。

但是，我认为您的意思实际上是在从一种颜色切换到另一种颜色之前等待几秒钟。在这种情况下，我建议使用 frameCount 或 millis() 作为条件并执行以下操作：

伪代码：

void setup() {
    ...
    double initial_time = millis();
    boolean delay_box = false;
    ...
}
void draw() {
    ...
    if (box event gets activated) {
        initial_time = millis();
        delay_box = true;
    }
    ...
    other stuff
    ...
    if (delay_box && millis() > initial_time + 5000) {
        draw_delayed_box();
        delay_box = false;
    } 
}

【讨论】：