jquery - 清除间隔不起作用

Question

我使用此代码来制作幻灯片动画

$(document).ready(function() {
/* slider initiate */
var timer = setInterval(slider,5000);

});
/* slider code */

var position = 0;
function slider() {
$('.slider .thumbs a').removeClass('selected');
position += 660;

var newPosition = position * (-1) + 'px';
if (position == 1980) {
    position = 0;
    newPosition = '0px';
}
var index = position / 660;
$('.slider .thumbs a').eq(index).addClass('selected');
$('.slider .slider-container').animate({left: newPosition}, 1000);
}
    /* click animation */
$('.slider .thumbs a').click(function(){
$('.slider .thumbs a').removeClass('selected');
$(this).addClass('selected');
var index = $(this).index();
var newPosition = index * (-660) +'px';
$('.slider .slider-container').animate({left: newPosition}, 1000);
clearInterval(timer);
var timer = setInterval(slider,5000);
});

但是当我点击拇指时，计时器只会加速，这意味着clearInterval不起作用当我尝试在悬停时清除它时也会发生这种情况

Answer 1

这是一个范围问题。

我猜当您尝试清除计时器时，计时器未定义(尝试使用 console.log() 查看)。

它会加速，因为由于您在 undefined 值上 clearInterval ，所以您没有清除任何内容，并且同时运行 2 个间隔。

在 $(document).ready 范围之外定义第一个 timer var。

var timer;
$(document).ready(function() {
/* slider initiate */
timer = setInterval(slider,5000);    
});

此外，不要在 slider 函数内重新定义 var timer。只需重复使用您之前声明的那个即可。

但首先，不要在 slide 中重复使用 setInterval。您在另一个间隔内启动一个间隔。如果您需要再次设置，您应该使用setTimeout。

结论

这就够了。使用setTimeout，您不需要取消它，因为它只触发一次。当您需要时设置另一个超时，它将模拟 setInterval 而无需取消它。

$(document).ready(function() {
/* slider initiate */
    setTimeout(slider,5000);
});

 function slider() {
    // your code
    setTimeout(slider, 5000);
 }