Delay between animation in javascript

Question

I amm working on rotation of objects around a circle. I want to stop the animation when a box reachs at top, there should be a delay of seconds then start animation until next box reaches on top.

Code Snippet:

if(x==40.109375 && y==218.015625){
  clearInterval(timer);
  timer = setInterval(animate, 1000);
}

x and y are the coordinates of top position

Fiddle

Should stop when reach at red circled position

Paul D. · Accepted Answer · 2013-12-13 16:33:14Z

1

You have to set a timeout before the animation starts again. Do it this way :

setTimeout(function(){
    timer = setInterval(animate, 35);
 },1000);

As you mentioned it, weird things happen if the mouse enters/leaves the box many times. To work around it, one solution would be to check the state of timer before changing it. Please see this fiddle :

http://jsfiddle.net/p876D/3/

Or, as you have done it, clearing the timeout would work too

http://jsfiddle.net/p876D/4/

edited Dec 13, 2013 at 16:33

answered Dec 13, 2013 at 16:16

Paul D.

2,02219 silver badges19 bronze badges

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

2 Comments

Muhammad Usman Over a year ago

just focus in the box, let it be stopped once, then loose the focus and again hover, it increases the speed

Paul D. Over a year ago

Indeed ! I will try to find a fix !

adeneo · Accepted Answer · 2013-12-13 16:15:12Z

0

A timeout would delay the start of the next interval

if(x==40.109375 && y==218.015625){
    clearInterval(timer);
    setTimeout(function() {
        timer = setInterval(animate, 100);
    }, 1000);
}

FIDDLE

answered Dec 13, 2013 at 16:15

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

Delay between animation in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related