1

看来大家对 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();
    });
};
4

2 回答 2

0

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

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

heroTransitionNext 执行时间为 2.1 秒。调用 setInterval 后 6.1 秒调用 clearInterval。在 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。

于 2012-07-26T22:34:56.673 回答
0

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

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

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

关于停止。

于 2012-07-26T23:00:52.953 回答