如何在分形绘制递归函数中创建延迟

Question

我正在尝试 Eloquent JavaScript 中遇到的分形绘制递归函数。

我想为每个分支的绘制设置延迟 - 目的是在我修改此函数及其参数时可视化分支/递归调用的流程。

我setTimeout在下面的代码中使用的方式似乎不起作用，我很困惑为什么。

我希望cx.fillRect(...)每次延迟都会画一个分支；而不是堆叠在队列中，因为没有其他代码setTimeout需要等待。

下面我首先包含了工作分形绘制 html/js 代码，没有尝试包含延迟。第二段代码是我尝试包含setTimeout延迟。

我在使用的非工作尝试setTimeout：

<canvas width="600" height="300"></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");

  function branch(length, angle, scale) {
    setTimeout(() => {
      cx.fillRect(0, 0, 1, length);
      if (length < 8) return;
      cx.save();
      cx.translate(0, length);
      cx.rotate(-angle);
      branch(length * scale, angle, scale);
      cx.rotate(2 * angle);
      branch(length * scale, angle, scale);
      cx.restore();
    }, 80);
  }
  cx.translate(300, 0);
  branch(60, 0.5, 0.8);
</script>

无延迟的工作代码：

<canvas width="600" height="300"></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");

  function branch(length, angle, scale) {
    cx.fillRect(0, 0, 1, length);
    if (length < 8) return;
    cx.save();
    cx.translate(0, length);
    cx.rotate(-angle);
    branch(length * scale, angle, scale);
    cx.rotate(2 * angle);
    branch(length * scale, angle, scale);
    cx.restore();
  }
  cx.translate(300, 0);
  branch(60, 0.5, 0.8);
</script>

Answer 1

尝试setTimeout延迟第一个调用，然后为其子树产生两个递归调用，它们具有相同的超时，导致它们相互遍历，依此类推。

所有递归调用都需要等待整个左子树完成绘制，然后才能移动到右子树，这也需要在调用解析并让父级进行下一个操作（右子树或解析）之前完成。您不能让两个不同的调用帧同时处理同一个画布堆栈。

我会使用承诺来做到这一点；这使您可以管理setTimeouts的顺序并使用sleep函数设置所需的延迟，基本上是承诺的setTimeout.

const sleep = ms => new Promise(
  resolve => setTimeout(resolve, ms)
);

const cx = document.querySelector("canvas").getContext("2d");

async function branch(length, angle, scale) {
  cx.fillRect(0, 0, 1, length);

  if (length < 8) {
    return;
  }

  await sleep(50); // delay in ms, good to make into a parameter
  cx.save();
  cx.translate(0, length);
  cx.rotate(-angle);
  await branch(length * scale, angle, scale);
  cx.rotate(2 * angle);
  await branch(length * scale, angle, scale);
  cx.restore();
}

cx.translate(300, 0);
branch(60, 0.5, 0.8);

<canvas width="600" height="300"></canvas>

为了进行比较，这里是如何在没有承诺的情况下使用每个子级触发的回调来向其父级发出信号表示它已完成，以便父级知道何时绘制下一个子树或解析：

const cx = document.querySelector("canvas").getContext("2d");

function branch(length, angle, scale, done) {
  cx.fillRect(0, 0, 1, length);

  if (length < 8) {
    done && done();
    return;
  }

  setTimeout(() => {
    cx.save();
    cx.translate(0, length);
    cx.rotate(-angle);
    branch(length * scale, angle, scale, () => {
      cx.rotate(2 * angle);
      branch(length * scale, angle, scale, () => {
        cx.restore();
        done && done();
      });
    });    
  }, 50);
}

cx.translate(300, 0);
branch(60, 0.5, 0.8);

<canvas width="600" height="300"></canvas>

由于您在画布上制作动画，您可能会考虑使用requestAnimationFrame循环遍历绘制每一帧的生成器函数。RAF 提供比setTimeout.

const cx = document.querySelector("canvas").getContext("2d");

function *branch(length, angle, scale) {
  cx.fillRect(0, 0, 1, length);

  if (length < 8) {
    return;
  }

  yield;
  cx.save();
  cx.translate(0, length);
  cx.rotate(-angle);
  yield *branch(length * scale, angle, scale);
  cx.rotate(2 * angle);
  yield *branch(length * scale, angle, scale);
  cx.restore();
}

cx.translate(300, 0);
const branchGen = branch(60, 0.5, 0.8);
const speedMs = 50;
let lastTime = 0;
let done = false;

(function drawFrame(time) {
  !done && requestAnimationFrame(drawFrame);

  if (time && lastTime === 0) {
    lastTime = time;
  }
  else if (lastTime > 0 && time >= lastTime + speedMs) {
    ({done} = branchGen.next());
    lastTime += speedMs;
  }
})();

<canvas width="600" height="300"></canvas>