javascript - 循环动态javascript一个接一个地转换，而不是一次全部转换

Question

我想在 html5 画布中一个接一个地排队几个转换。循环转换函数一次调用所有转换。如果迭代次数超过 100，我不知道回调是否会这样做。我想做这样的事情：--

for(i=0;i<10;i++) { move(circle,Math.floor(Math.random()*1000),400); }

move 是我定义的函数，它可以进行一些转换。它工作得很好。

在这里，我希望圆圈在每次迭代时改变它的位置，但它只改变它的位置一次。

Answer 1

是的，当然。它不完全是问题的解决方案，而是一种技巧。我首先将指令存储在一个单独的数组（transitionsequence）中，并使用递归回调回调（在动力学中定义的回调）。它不是很有效的方法，但我不在乎，只要它解决了问题。:)

`功能move2（我，限制）{

   var obj = transitionsequence[i].object;
    obj.transitionTo({
      y:100,
      duration: 0.3,
      callback : function()
      {
        obj.transitionTo({
          x:transitionsequence[i].x,
          duration:0.3,
          callback: function()
          {
            obj.transitionTo({
              y:transitionsequence[i].y,
              duration:0.3,
              callback: function()
              {
                if(i < limit)
                move2(i+1 , limit);
              }
            });

          }
        });
      }                          
    });

  };`

Answer 2

你可以这样做：

var i=10;
var interval = window.setInterval(function(){
    move(circle,Math.floor(Math.random()*1000), 400);
    console.log(i);
    if(!--i) {
        window.clearInterval(interval);
    }
}, 400); // wait 400 msecs between calls

或者，如果您的移动函数愿意在转换完成后调用回调函数：

var i=10;
var callback = function(){
    if(i--){
        move(circle,Math.floor(Math.random()*1000),400, callback);
    }
}
callback();

Answer 3

您的方法不起作用的原因是浏览器没有机会在您的绘画步骤之间重新绘制画布。传统上，这是通过渲染一个步骤（帧）然后等待一小段时间来解决的，但是最近的浏览器中提供了一个新功能：requestAnimationFrame，它正在解决这个确切的问题。

检查Animating with javascript: from setIntervaltorequestAnimationFrame和requestAnimationFramefor Smart Animating（他们还展示了如何在不支持的浏览器中创建 shim 动画requestAnimationFrame）。

（我不知道 kinetic.js，但它甚至可能直接支持这样的 shim）。