clearInterval-出了点问题

Question

似乎每个人都有clearInterval的几个问题。我已经建立了一个滑块，允许人们将鼠标悬停在箭头上。横幅也旋转几秒钟。我希望能够在有人点击其中一个箭头后关闭自动旋转。

这是我的代码:

$(function(){
    var intvl = 0;
    intvl = setInterval(heroTransitionNext, 2000);
    $('.rightArrow').click(function(){
       window.clearInterval(intvl);
    });
});

编辑:

下面是它正在调用的函数:

function heroTransitionNext() {
    $('.HP-hero li').filter(':visible').fadeOut('normal', function () {
        if ($(this).next().length != 0) {
            activeZone = parseInt(activeZone) + 1;
            $(this).next().fadeIn('normal', heroNavHighlight(activeZone));
        } else {
            activeZone = 1;
            $('.HP-hero li:first-child').fadeIn('normal', heroNavHighlight(activeZone));
        }
        $(this).hide();
    });
};

Answer 1

要停止动画，您可以使用 jquery'的 .stop() 但不确定它是否能解决你所面临的问题（没有想象），但你可以试一试

$('.HP-hero li').stop(1,1); // or try $('.HP-hero li').stop()
window.clearInterval(intvl);

作为 say2joe 说 clearInterval 只会停止函数下次调用，但它不会清除当前队列（他是对的），所以在这种情况下 stop 可以使用。

关于停止.

Answer 2

取决于您的HerotRansitionNext函数正在进行的工作量，即使清除间隔 - 换句话说，它仍然可能正在执行 - 换句话说，清除间隔将停止调用函数 - 但是该函数的任何实例（s）在内存中执行将继续执行，直到完成。 要更清晰，这是一个用例（你可以通过在Firebug或Developer Tools中使用Profiler来检查一下自己）：

herotransitionnext执行时间为2.1秒。 调用setInterval后调用ClearInterval 6.1秒。 在6.1秒时，HerotRansitionNext已被调用四次。然而，前三个执行完成，但第四个将无法完成，直到它完成执行（自SetInterval以来的8.1秒）。注意：在此用例中，每个连续的调用将执行，而最后一个调用的执行仍在继续（100多ms） - 换句话说，您将从2到2.1,4到4.1和6的执行重叠。 6.1第二间隔。

如果函数需要更长时间才能执行时间间隔集，请使用带有setTimeout（）的递归函数。以下链接将为您提供一个很好的例子。

此外，解释的很好参考是 https：//developer.mozilla.org/ en / dom / window.setinterval 。