setInterval在5-7分钟后运行速度很快

Question

为什么setInterval会在一段时间后运行得很快？我用下面的代码在我的网站上做了一个背景幻灯片。我也使用fullpage preloader plugin。

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 9999);
});

//use fullpage preloader
QueryLoader.init();

我想每9999毫秒重复一次动画。但在一段时间(5-7分钟)之后，动画似乎每1000毫秒重复一次。

Answer 1

javascript函数setInterval()返回一个句柄

handle = setInterval("slideSwitch()", 9999);

您可以随时使用clearInterval清除这些内容

function killInterval(){
   clearInterval(handle);
}

因此，您必须在一段时间后清理间隔，为此，您需要使用setTimeout

setTimeout("killInterval()",3000);

Answer 2

您可能希望确保一个动画不会以您无意的方式中断前一个动画：

...
$next.css({ opacity: 0.0 })
     .addClass('active')
     .stop() // <-- new line
     .animate({ opacity: 1.0}, 1000, function() {
         $active.removeClass('active last-active'); 
     });

Answer 3

setInterval将每9999毫秒运行一次函数，而不是一次。

setInterval将重复，setTimeout将运行一次。

您需要使用setTimeout。