重复一段时间后，间隔不会立即清除

我在我的网站上使用Jquery和setInterval创建了一个弹跳箭头，如下所示：

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

你可以在这里看到这个codepen：http://codepen.io/mcheah/pen/wMmowr

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

我的问题是这些：

为什么弹跳偶尔会不同步？

为什么清除间隔需要一段时间才能清除它是否重复了一段时间？

有没有更好的方法来产生弹跳箭？ CSS转换更可靠吗？

谢谢你的帮助！

---

你正试图完美地协调一个setInterval()计时器和两个jQuery动画，以使两者完美协调。 这是在寻求麻烦，随着时间的推移两者可能会分开，所以它被认为是糟糕的设计模式。

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

你可以在另一个版本的codepen中看到：http://codepen.io/anon/pen/NxYeyd

function run() {
    var self = $("div");
    if (self.data("stop")) return;
    self.animate({top:"30px"},100, "easeInCubic")
        .animate({top:"0px"}, 100, "easeOutCubic", run);
}

run();


$("div").click(function() {
    // toggle animation
    var self = $(this);
    // invert setting to start/stop
    self.data("stop", !self.data("stop"));
    run();
    console.log("toggled bouncing");
});

---

以这种方式混合animate()和定时器并不是一个好主意。 你没有机会同步这样的东西。 而且没有必要。 您可以简单地将一个函数添加到动画队列中，请看这里：https://stackoverflow.com/a/11764283/3227403

什么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
});

编辑：我现在纠正了一些不准确的地方。 正在运行的示例现在在codepen上。

---

如果你想使用JavaScript动画，你可以使用更好的东西，像绿叶补间库http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/这样的事情：

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

链接地址: http://www.djcxy.com/p/89865.html

上一篇: Interval doesn't clear immediately after repeating for a while

下一篇: Potential issue with one of Oracle's trails on Java generics