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

根据你的heroTransitionNext函数正在做多少工作，即使间隔被清除，它仍然可能正在执行 - 换句话说，清除间隔将停止调用函数 - 但是，函数的任何实例（s）在内存中执行将继续执行直到完成。

更清楚，这是一个用例（您可以通过在Firebug或开发人员工具中使用分析器来自行检查）：

heroTransitionNext执行时间为2.1秒。在调用setInterval后6.1秒调用clearInterval。在6.1秒时，已经调用了heroTransitionNext四次。前三次执行已经完成，但是第四次执行完成直到完成执行（自调用setInterval以来的8.1秒）。注意：在这个用例中，每个连续的invokation将在最后一个invokation的执行仍在继续时执行（再多100个ms） - 换句话说，你将执行重叠从2到2.1,4到4.1和6到6.1秒间隔。

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

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

Answer 2

要停止动画，您可以使用jquery的{{1}}，但不确定它是否能解决您面临的问题（没有可视化），但您可以给它一个尝试

.stop()

由于$('.HP-hero li').stop(1,1); // or try $('.HP-hero li').stop() window.clearInterval(intvl);表示say2joe将停止该函数下次调用，但它不会清除当前队列（他是对的）所以在这种情况下clearInterval可能是使用

About Stop

clearInterval - 有点不对劲

2 个答案: