0

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

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;


        }
4

4 回答 4

2

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

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

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

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

于 2012-05-16T23:33:39.417 回答
1

如果您可以重构代码会更好：

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

   if(position++ < 100){
       setTimeout(function(){animate(position);}, 100);
   }
}
于 2012-05-16T23:34:29.280 回答
1

此代码将创建 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-16T23:38:02.420 回答
1

如果您正在寻找阻塞睡眠调用，JavaScript 没有对它的本机支持。

但是，如果您只是想以固定的时间间隔执行一段代码，则可以使用

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

如果你打算将它用于动画，你应该考虑requestAnimationFrame 作为一个更好的选择

于 2012-05-16T23:40:02.640 回答