如何使用JQuery停止并重新激活带有图像堆栈的setInterval()

Question

我对使用JQuery事件处理程序的setInterval()函数有点问题。

我的HTML中有一堆图像。每6秒就会有一个图像淡出，下一个图像会替换上一个图像。这是通过将函数imgAutoChange()作为参数传递给setInterval()来完成的，如下所示：

var intervalId = setInterval('imgAutoChange()', 6000);

我还有两个按钮，一个是.prev类，另一个是.next类别。当我点击.prev或.next按钮时，我想实现的是重置setInterval('imgAutoChange()'，6000)并将图像更改为上一个(如果我单击.prev按钮)或下一个(单击.next按钮)，以便每次单击其中一个按钮时setInterval都会重新启动。(我通过一个名为getNxtOrPrevImg()的函数点击更改图像，该函数需要一个参数("p")来获取堆栈的上一个图像，并需要("n")来获得下一个图像。该函数可以工作，但我不知道如何处理setInterval())

实际上我的js是：

var intervalId = setInterval('imgAutoChange()', 6000);
$(function() {
$('#photcont .act').css("display", "none").fadeIn(2000);
});        
$(function() {
$('.leftImgNav').click(function() {
clearInterval(intervalId);
getNxtOrPrevImg("p");
var intervalId = setInterval('chgImgs("#photcont")', 6000);
});
$('.rightImgNav').click(function() {
clearInterval(intervalId);
getNxtOrPrevImg("n");
var intervalId = setInterval('chgImgs("#photcont")', 6000);
});
});

再加上函数imgAutoChange()和getNxtOrPrevImg()，我之前已经解释过了。但它不起作用。当我点击其中一个按钮时，图像会发生变化，然后另一个setInterval()启动，我无法再使用clearInterval停止它。。。有没有更聪明的方法来实现我的目标？

Answer 1

您有一个范围问题。在函数体中，将var intervalId替换为intervalId:

$(function() {
$('.leftImgNav').click(function() {
clearInterval(intervalId);
getNxtOrPrevImg("p");
intervalId = setInterval('chgImgs("#photcont")', 6000);
});
$('.rightImgNav').click(function() {
clearInterval(intervalId);
getNxtOrPrevImg("n");
intervalId = setInterval('chgImgs("#photcont")', 6000);
});
});

Answer 2

不要在间隔id之前使用var，因为您正在该范围中分配另一个间隔：

var intervalId = setInterval('imgAutoChange()', 6000);
$(function() {
$('#photcont .act').css("display", "none").fadeIn(2000);
});        
$(function() {
$('.leftImgNav').click(function() {
clearInterval(intervalId);
getNxtOrPrevImg("p");
intervalId = setInterval('chgImgs("#photcont")', 6000);//dont use var before interval id
});
$('.rightImgNav').click(function() {
clearInterval(intervalId);
getNxtOrPrevImg("n");
intervalId = setInterval('chgImgs("#photcont")', 6000);
});
});