Question

我正在使用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;


        }

Answer 1

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

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

在for循环中，假设el是for循环之外的jQuery对象。

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

Answer 2

如果您可以重新计算代码，那会更好：

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

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

Answer 3

此代码将产生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循环。

Answer 4

如果您正在寻找阻止睡眠调用，则JavaScript不具有本机支持。

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

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

如果您计划将其用于动画，则应该查看requestAnimationFrame 作为一个更好的选择

如何在for循环中放置javascript时间延迟？

4 个答案: