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

Question

我在我的网站上有一个用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秒)然后清除间隔,你会发现停止弹跳需要几秒钟.

我的问题是这些:

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

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

3. 是否有更好的方法来获得弹跳箭头？CSS转换更可靠吗？

谢谢你的帮助!

Answer 1

您正在尝试完美协调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");
});