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

Question

我的网站上有一个弹跳箭头，是我使用 Jquery 和 setInterval 创建的，如下所示:

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

您可以在此处的代码笔中看到:http://codepen.io/mcheah/pen/wMmowr

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

我的问题是:

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

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

3. 有没有更好的方法来制作弹跳箭头？ CSS 转换更可靠吗？

感谢您的帮助!

Answer 1

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

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

您可以在另一个版本的代码笔中看到: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");
});