javascript - 用javascript清除间隔

Question

我制作了一个有间隔的动画。这是我的脚本：

var count = 0;
var countSecond = -40;
function arrowAnimation() {
    if (count > 40) {
        clearInterval();
    }
    $('.list-what-we-do .arrow').css({
        top: (count++) + 'px'
    });
}
function arrowAnimationSecond() {
    if (countSecond > 0) {
        clearInterval();
    }
    $('.list-what-we-do .arrow').css({
        right: (countSecond++) + 'px'
    });
}

setInterval(arrowAnimation, 5);
setInterval(arrowAnimationSecond, 5);

现在我的问题。我怎样才能停止间隔。我使用了clearInterval。但这行不通。我怎样才能解决这个问题？感谢您的帮助！

Answer 1

当你使用setInterval或者setTimeout返回值是一个引用时；您将此引用传递clearInterval给取消。

var foo = setTimeout(...);
clearTimeout(foo);

Answer 2

您必须将setInterval方法的返回值分配给变量

然后你可以稍后使用clearInterval

var count = 0;
var countSecond = -40;

var interval = setInterval(arrowAnimation, 5);
var secondInterval = setInterval(arrowAnimationSecond, 5);

function arrowAnimation() {
    if (count > 40) {
        clearInterval(interval);
    }
    $('.list-what-we-do .arrow').css({
        top: (count++) + 'px'
    });
}
function arrowAnimationSecond() {
    if (countSecond > 0) {
        clearInterval(secondInterval);
    }
    $('.list-what-we-do .arrow').css({
        right: (countSecond++) + 'px'
    });
}