javascript - 如何在 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);