绘制对象

Question

不知怎的，我做了我的研究，发现javascript是单线程的！ 我一直想弄清楚如何通过javascript中的for loop制作动画。

这是我迄今为止所做的。 我试图使用javascript在画布上绘制一个对象。它运行循环，它没有一步一步走。它只是运行循环并绘制一次而不是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 ms之后调用它的第一个参数一次，然后循环没有延迟。

如果要调用常规间隔，可以使用setInterval函数（在第15次迭代后不要忘记removeInterval）。

请注意，在两种情况下（setTimeout，setInterval），给定的延迟仅是指示性的。

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