Javascript 间隔不'；重复一段时间后不能立即清除

我用Jquery和setInterval创建的网站上有一个反弹箭头，如下所示：

bouncing = setInterval(function() {
    $("div").animate({
        top:"30px"
    },100,"easeInCubic",function() {
        $("div").animate({
            top:"0px"
        },100,"easeOutCubic");
    });
    console.log("bounced");
},200);

您可以在这里的代码笔中看到这一点：

我让它运行得比我需要的快，因为它更容易更快地看到问题。我的问题是，让间隔运行几秒钟后，您会注意到，反弹元素不会立即向上或向下反弹，而是会停止半秒钟，然后挂在那里，然后再开始。如果您让它运行更长的时间（20秒），然后清除间隔，您会注意到需要几秒钟才能停止反弹

我的问题是：

为什么反弹偶尔会不同步

如果清除间隔已重复一段时间，为什么需要一段时间才能清除

有没有更好的办法让箭反弹？CSS转换是否更可靠

谢谢你的帮助

以这种方式将

animate（）

与计时器混合使用不是一个好主意。没有机会可以同步这样的内容。没有必要。您只需将一个函数附加到动画队列中，如下所示：

animate（）

所做的是将动画请求放入作业队列，稍后在适当的时间到来时进行处理。当您打破间隔时，队列中累积的内容仍将被处理。有一种方法可以清除队列并立即停止所有动画

JQuery动画函数实际上操纵CSS，在HTML中除此之外没有其他内容。另一种选择是使用画布，但这是一种完全不同的方法，我不推荐使用。使用JQuery的动画，您已经是最佳选择

这是解决您问题的简单方法：

function bounce()
{
  $("div")
    .animate({
      top: "30px"
    }, 100, "easeInCubic")
    .animate({
      top: "0px"
    }, 100, "easeOutCubic", bounce); // this loops the animation
}

在页面加载时使用以下命令开始跳转：

$(bounce);

使用以下命令单击时停止反弹：

$("div").click(function() {
  $("div").stop().clearQueue().css({ top: "0px" });
  // you want to reset the style because it can stop midway
});

---

编辑：我现在纠正了一些错误。正在运行的示例已打开。

如果您想使用javascript制作动画，可以使用更好的工具，如greensock tween库 大概是这样的：

var tween = TweenMax.to($("div"), 100, {y: "100px", yoyo: true, repeat: -1});

---

您正在尝试完美地协调一个

setInterval（）

计时器和两个jQuery动画，以使两者完全协调。这是自找麻烦，随着时间的推移，两者可能会分离，因此这被认为是一种糟糕的设计模式

相反，如果您只是使用第二个动画的完成来重新启动第一个动画并像那样重复，那么您每次都有完美的协调

您可以在另一个版本的代码笔中看到：

---

您可以将间隔代码包装为：

if(!$("div").is(":animated"))

这将仅在上一个动画完成时启动动画。 之所以会有奇怪的反弹，是因为你的动画在排队。 您现在可以检查它的工作方式：

我建议在第二个动画结束时使用完整回调，并在此版本中使用变量控制反弹递归调用：

---

在JS处理过程中，间隔函数是异步的。因此，他们会等到运行代码出现“中断”。事件得到提示，然后在有机会时触发。间隔非常不一致，对于需要在特定时间运行的事件，不建议使用间隔。请看：老实说，我认为这种反弹/闪光/发光/跳动/任何东西都是不好的UX（Office 2007必须使“文件”菜单替换按钮发光，因为它不是一个明显的按钮，这让我厌烦了$！&但就为什么它不能按预期工作而言，这是一个好问题（我没有答案）.不要在动画中使用JavaScript（如果您使用Velocity或类似的工具，可能会），请坚持使用CSS动画。另外，

setInterval

不是用于动画的东西，因为它是异步的。底线：保持样式为CSS；-）谢谢大家。我将寻找CSS解决方案@Draco18s-它是一个交互式网站，实际上需要按钮元素来吸引人们对自己的注意。@mcheah按钮元素永远不需要吸引人们对自己的注意。唯一的原因是它们看起来不像纽扣。但这是一个问题，因为我实际上无法让它工作。clearQueue用于停止动画，但我还添加了一个console.log（）来显示按钮何时弹跳，以及按钮何时在我需要时停止，但它一直记录弹跳，这打乱了其他动画的计时。它可能与需要使用参数调用bounce来指定需要反弹的元素有关，但我不确定。我使用了jfriend00的变通方法，这对我很有效-不过谢谢你的帮助！啊,对。那是一个我没有注意到的错误。我在

clearQueue（）

之前添加了一个

stop（）

。现在它可以正常工作了。出于您的兴趣，在

if（self.data（“stop”））返回之前放置一个
console.log（）
if(!$("div").is(":animated"))