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

如何使用JQuery停止并重新激活带有一堆图像的setInterval（）？

2 个答案: