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

Answer 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/

Answer 2

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