JavaScript中动画之间的延迟

Question

我正在处理围绕圆形旋转的物体。当一个盒子到达顶部时，我想停止动画，然后延迟几秒钟再开始动画，直到下一个盒子到达顶部。

代码片段：

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

x 和 y 是顶部位置的坐标。

Fiddle

- Muhammad Usman

Answer 1

在动画重新开始之前，您需要设置一个超时时间。可以按照以下方式进行：

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

正如您所提到的，如果鼠标进入/离开框多次时会发生奇怪的事情。为了解决这个问题，一个解决方案是在更改timer状态之前检查其状态。请参见这个fiddle:

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

或者，就像你所做的那样，清除超时也可以起作用。

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

- Paul D.

---

只需专注于该框，让其停止一次，然后失去焦点并再次悬停，它会增加速度。 - Muhammad Usman

当然！我会尝试找到解决方法！ - Paul D.

Answer 2

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

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

代码片段

- adeneo