How Do I put a javascript time delay in a for loop?

Question

I am working on an animation using Javascript and HTML5 CAnvas. How do achieve a delay ( non-blocking ) within a for loop ? I want to make sure that the second line doesnt get drawn before the delay is over .

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;


        }

Added actual code . HTML5 canvas

geeky_monster
– geeky_monster

2012-05-16 23:36:22 +00:00
Commented May 16, 2012 at 23:36 — geeky_monster
– geeky_monster, Commented May 16, 2012 at 23:36

Max · Accepted Answer · 2012-05-16 23:33:39Z

2

If you're using jQuery, check out the .delay() API.

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

inside the for-loop, assuming el is a jQuery object outside the for loop.

Otherwise, I'd just use setTimeout(function(){ ... }, i * 100);

answered May 16, 2012 at 23:33

Max

5,1214 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

@Peter yeah, okay so .delay() actually wouldn't do what one wants -- I was hoping/assuming that there would be an arbitrary callback that one could chain, but it actually looks like there isn't. I'll leave the jQuery bit in so your comment makes sense :P

web_bod · Accepted Answer · 2012-05-16 23:34:29Z

1

It would be better if you could re-factor your code:

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

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

answered May 16, 2012 at 23:34

web_bod

5,7681 gold badge19 silver badges25 bronze badges

1 Comment

geeky_monster Over a year ago

I did this . Works like magic .. Perfect . Thanks for the timely help :)

Amit · Accepted Answer · 2012-05-17 00:06:27Z

1

This code will create delay of 2 seconds.

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);

Through this code you can omit FOR loop.

edited May 17, 2012 at 0:06

answered May 16, 2012 at 23:38

Amit

22.2k28 gold badges76 silver badges94 bronze badges

Comments

user229044 · Accepted Answer · 2012-08-22 02:48:13Z

1

If you are looking for a blocking sleep call, JavaScript doesn't have native support for that.

if however you are simply looking to execute a piece of code at a fixed interval, you can use

The <callback> can be any function, anonymous or named.

If you're planning to use it for animation, you ought to look into requestAnimationFrame as a superior alternative

edited Aug 22, 2012 at 2:48

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered May 16, 2012 at 23:40

Lucas Green

3,95924 silver badges27 bronze badges

Collectives™ on Stack Overflow

How Do I put a javascript time delay in a for loop?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related