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()查看）。

它会加速，因为clearInterval undefined值timer之后你什么都没有清楚，而且你有2个间隔一次运行。

在$(document).ready范围之外定义您的第一个var timer; $(document).ready(function() { /* slider initiate */ timer = setInterval(slider,5000); }); var。

var timer

另外，请勿在{{1}} func中重新定义slider。只需重复使用您之前声明的那个。

但最重要的是，不要在setInterval内重复使用slide。您在另一个间隔内启动间隔。如果您需要再次设置，请使用setTimeout。

<强>结论

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

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

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

清除间隔不起作用

1 个答案: