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

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对此不提供本机支持。

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

• [intervalHandle] setInterval(<callback>, <ms>)
• [void] clearInterval(<intervalHandle>) 。

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

如果您打算将其用于动画， requestAnimationFrame考虑使用requestAnimationFrame作为更好的选择