循环动态javascript转换一个接一个，而不是一次完成所有转换

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

---

对于（i=0；i来说，您的方法不起作用的原因是，浏览器没有机会在绘制步骤之间重新绘制画布。传统上，这是通过渲染单个步骤（帧）然后等待少量时间来解决的，但有一个新功能，正是解决了这个问题

检查和（它们还显示了如何在不支持

requestAnimationFrame

的浏览器中创建用于动画制作的垫片）

（我不知道kinetic.js，但它甚至可能直接支持这样一个垫片）。

您可以这样做：

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();

---

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

`功能移动2（i，限制）{

var obj=transitionsequence[i]。对象；
对象转换({
y:100，
持续时间：0.3，
回调：函数（）
{
对象转换({
x:转换序列[i].x，
持续时间：0.3，
回调：函数（）
{
对象转换({
y:转换序列[i].y，
持续时间：0.3，
回调：函数（）
{
如果（i<限制）
移动2（i+1，极限）；
}
});
}
});
}                          
});
};`

谢谢你的解决方案，但没有一个能真正帮助我。也许我无法解释我的问题。@Ankurrana恭喜你！如果你能写下你的解决方案作为你问题的答案并接受它，那就太好了。谢谢你的回答，但没有一个能帮到我，也许我无法解释我的问题<代码>trans1={y:0，x:800，持续时间：2}

trans2={y:200，x:0，持续时间：2}
磁盘[0]。转换到（trans1）
光盘[0]。转换到（trans2）`此代码将光盘直接传输到（0200），而不是先移动到（800,0）然后再移动到（0200）。有没有办法不用回调函数就能做到这一点@David McMullin@unthoughtJavascript是单线程的，尝试暂停执行等待动画结束是一个糟糕的想法，因为在这200毫秒内不会发生任何其他事情，没有滚动，没有点击，什么都不会发生。因此，是的，必须使用某种回调/分离函数。如果要同时移动多个对象，则需要计算每次移动并设置位置，然后绘制一次，而不是使用过渡或动画。如果你张贴你的例子，它将有助于解决你的问题。
   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);
              }
            });

          }
        });
      }                          
    });

  };`