javascript中动画之间的延迟

Question

我正在围绕圆圈旋转物体。我想在一个盒子到达顶部时停止动画，应该有一个秒的延迟然后开始动画，直到下一个盒子到达顶部。

代码段：

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

x和y是顶部位置的坐标

Fiddle

Answer 1

您必须在动画再次开始之前设置超时。这样做：

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

正如你所提到的，如果鼠标多次进入/离开盒子会发生奇怪的事情。要解决此问题，一种解决方案是在更改之前检查timer的状态。请看这个小提琴：

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

或者，正如您所做的那样，清除超时也会起作用

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

Answer 2

超时会延迟下一个间隔的开始

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

FIDDLE