Problems with jQuery setInterval()?

本文关键字：setInterval with jQuery Problems 更新时间：2023-09-26

我有一个用jQuery构建的图像滑块。它被设置为以7000毫秒的间隔滑动图像。看起来，有时，只有有时，滑块会以超高速滑动图像(滑动之间大约1秒的间隔)。我不能确定原因。请帮助!

链接到带有滑块的站点:http://healthyhometech.com

    function slider() {
        $(".paging").hide();
        $(".paging a:first").addClass("active");
        var imageWidth = $(".window").width();
        var imageSum = $(".image_reel img").size();
        var imageReelWidth = imageWidth * imageSum;
        $(".image_reel").css({'width' : imageReelWidth});
        rotate = function(){
            var triggerID = $active.attr("rel") - 1; 
            var image_reelPosition = triggerID * imageWidth; 
            $(".paging a").removeClass('active'); 
            $active.addClass('active'); 
            $(".image_reel").animate({
            left: -image_reelPosition
            }, 500 );
        }; 
        rotateSwitch = function(){
            play = setInterval(function(){ 
             $active = $('.paging a.active').next(); 
                if ( $active.length === 0) { 
                $active = $('.paging a:first'); 
            }
                rotate(); 
            }, 7000); //Timer speed
        };
        rotateSwitch();
        $(".image_reel a").hover(function() {
        clearInterval(play); 
        }, function() {
        rotateSwitch(); 
        }); 

    };

setInterval有一个关键的问题:它仍然在内存中!因此，有可能在测试时刷新页面，因此，为同一个过程创建不同的setInterval，因此，有时，您会看到过程执行得更快(实际上，setInterval发生了多次)。

我能够通过使用var "my-interval" = setInterval来解决类似的问题，并且在运行setInterval之前，检查它是否存在(不是零)。如果是，杀死它或者根本不运行:

var myInterval;
if (myInteval == undefined) myInterval = setInterval(function () {
    ...
    myInterval=12345;
},..);

尝试在代码的下面部分增加时间值:

$(".image_reel").animate({
        left: -image_reelPosition
        }, 500 ); //Here increase the value 500 to a value suitable to you, for example 1000, 2000 etc. anything you like.

这里的值以毫秒为单位，定义了动画的速度。

[编辑]

好吧，从我观察到的，我认为你得到快速滑动问题只有当你离开网页打开一个选项卡，并继续在其他选项卡上工作，然后当你返回到包含页面的选项卡，它快速滑动图像的速度。然而，如果你一直留在账单上，就不会发生这种情况。我的猜测是你注意到这个问题在Chrome浏览器。

在脚本中似乎没有问题，只有Chrome浏览器的工作方式。如果你在后台留下一个标签，chrome可能会暂停setInterval()函数，当你返回到页面时，它会在后台运行它的时间。这可能就是Chrome浏览器的工作方式。代码没有问题