清除间隔不起作用

我使用此代码动画幻灯片

$(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); }); 

但是当我点击拇指时，计时器只会加速，这意味着当我尝试在hover时清除它时，clearInterval也无法正常工作

Answer 1

这是一个范围问题。

我想当你试图清除它时，计时器是未定义的（尝试用console.log()查看）。

它会加速，因为你在undefined值上清除了间隔，你什么都不清楚，你有两个间隔一次运行。

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

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

另外，不要在slider func中重新定义var timer 。 只需重复使用您之前声明的那个。

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

结论

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

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