clearInterval - something's amiss

clearInterval - something's amiss

本文关键字：amiss something clearInterval      更新时间：2024-03-24

似乎每个人都对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();
    });
};

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

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

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

关于停止。

根据heroTransitionNext函数的工作量，即使间隔被清除，它也可能仍在执行——换句话说，清除间隔将停止调用函数——但是，在内存中执行的任何函数实例都将继续执行，直到完成。

更清楚地说，这里有一个用例（你可以通过使用Firebug或Developer Tools中的探查器自己检查一下）：

heroTransitionNext执行时间为2.1秒。clearInterval在调用setInterval 6.1秒后被调用。在6.1秒时，heroTransitionNext已经被调用了四次。前三次执行已经完成，但第四次执行要等到它完成执行（调用setInterval后8.1秒）才能完成。注意：在这个用例中，每个连续的调用都将执行，而最后一个调用的执行仍在继续（再持续100毫秒）——换句话说，执行重叠的时间间隔为2到2.1、4到4.1和6到6.1秒。

如果函数的执行时间比设置的间隔长，请使用带有setTimeout（）的递归函数。下面的链接将为您提供一个很好的示例。

此外，一个很好的解释参考是https://developer.mozilla.org/en/DOM/window.setInterval.

相关文章：