绘制对象时 JavaScript for 循环问题

Question

不知何故，我做了研究，发现 javascript 是单线程的!我一直在试图弄清楚如何通过 JavaScript 中的 for 循环 制作动画。

这就是我到目前为止所做的。我正在尝试使用 javascript 在 Canvas 上绘制一个对象。它运行循环，而不是一步一步地运行。它只是运行循环并绘制一次而不是 10 次，并且忽略超时功能。

在单个实例中，它绘制了(P/S。忽略多个版本，因为我正在测试它，所以我删除了 context.clearRect(0, 0, context.canvas.width, context.canvas.height )；:

JS:

   // down button click
   down.onclick = function() {
      if (!imgLoaded) return;
      flag=false;
      setTimeout(function() {
  for(var i = 0; i < 15 ; i++) {
    posY += 10;
     context.drawImage(img, posX, posY );
  }}, 9);
  // call next step

Answer 1

这不是 setTimeout 的工作方式。按照您编写的方式，setTimeout 在 9 毫秒后调用其第一个参数一次，然后无延迟地循环。

如果你想被称为定期间隔，你可以使用setInterval函数(不要忘记在第15次迭代后removeInterval)。

请注意，在这两种情况下(setTimeout、setInterval)，给定的延迟仅具有指示性。

您可能想要使用的是 Window.requestAnimationFrame()函数，这是在浏览器中制作动画的常用方法。