如何在for循环中放入JavaScript时间延迟？

我正在使用Javascript和HTML5 CAnvas进行动画制作。如何在for循环中实现延迟（非阻塞）？我想确保第二行在延迟结束之前不会被绘制。如何在for循环中放入JavaScript时间延迟？

for (i=1;i<coor.length;i++) 

     { 
      context.beginPath(); 
      var end_point=coor[i]; 
      var x1y1=start_point.split(','); 
      var x2y2= end_point.split(','); 


      context.moveTo(parseInt(x1y1[0]),parseInt(x1y1[1])); 
      context.lineTo(parseInt(x2y2[0]),parseInt(x2y2[1])); 
      context.stroke(); 

      start_point=end_point; 


     }

来源

2012-05-16 geeky_monster

请详细说明，更多 – zerkms

增加了实际的代码。 HTML5 canvas –

它会更好，如果你能重新因子代码：

function animate(position) 
{ 
    // do stuff based on position 

    if(position++ < 100){ 
     setTimeout(function(){animate(position);}, 100); 
    } 
}

来源

2012-05-16 23:34:29

我这样做了。像魔术一样工作..完美。感谢您的及时帮助:) –

如果您使用的是jQuery，请查看.delay() API。

el.delay(800).fadeIn(400);

for循环内，假定el是外部的一个jQuery对象for循环。

否则，我只是用setTimeout(function(){ ... }, i * 100);

来源

2012-05-16 23:33:39 Max

+1您的第二个建议。 – Peter

@Peter是的，没关系，所以.delay（）实际上不会做我想做的事情 - 我希望/假设会有一个可以链接的任意回调，但实际上它看起来好像没有。我将离开jQuery位，以便您的评论有意义：P – Max

此代码将创建2秒延迟。

var i=0;  
setInterval(function() { 
    context.beginPath(); 
       var end_point=coor[i]; 
       var x1y1=start_point.split(','); 
       var x2y2= end_point.split(','); 


       context.moveTo(parseInt(x1y1[0]),parseInt(x1y1[1])); 
       context.lineTo(parseInt(x2y2[0]),parseInt(x2y2[1])); 
       context.stroke(); 
       i++; 
       start_point=end_point; 

    }, 2000);

通过此代码，您可以省略FOR循环。

来源

2012-05-16 23:38:02 jams

感谢队友的帮助！ –

你的代码在第三行中有对[i]的引用。 –

现在可以mad.geek。 – jams

如果您正在寻找阻塞睡眠呼叫，则JavaScript不具备对此的原生支持。

然而，如果你只是希望以固定的间隔执行的一段代码，可以使用

该<callback>可以是任何函数，匿名或命名。

如果你打算使用它的动画，你应该看看requestAnimationFrame 作为一种更好的选择

来源

2012-05-16 23:40:02

感谢队友的帮助！ –

如何在for循环中放入JavaScript时间延迟？

回答

相关问题