Javascript滑块在一段时间后疯狂地滑动

如果我把这个滑块放在网站上一段时间，它就会开始疯狂地滑动。如何测试这个bug？打开bellated.com/vyrai测试页面。你可以看到大张茵的照片。让它停留一两分钟，然后浏览其他浏览器标签，当你回到这个站点时，你会看到带有滑块的bug。有没有办法解决这个问题

我正在使用以下脚本：

        <script type="text/javascript">
          $(document).ready(function() {

        var currentPosition = 0;
        var slideWidth = 673;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var slideShowInterval;
        var speed = 6000;

        //Assign a timer, so it will run periodically
        slideShowInterval = setInterval(changePosition, speed);

        slides.wrapAll('<div id="slidesHolder"></div>')

        slides.css({ 'float' : 'left' });

        //set #slidesHolder width equal to the total width of all the slides
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);


        manageNav(currentPosition);

        //tell the buttons what to do when clicked
        $('.nav').bind('click', function() {

            //determine new position
            currentPosition = ($(this).attr('id')=='rightNav')
            ? currentPosition+1 : currentPosition-1;

            //hide/show controls
            manageNav(currentPosition);
            clearInterval(slideShowInterval);
            slideShowInterval = setInterval(changePosition, speed);
            moveSlide();
        });

        function manageNav(position) {
            //hide left arrow if position is first slide
            if(position==0){ $('#leftNav').hide() }
            else { $('#leftNav').show() }
            //hide right arrow is slide position is last slide
            if(position==numberOfSlides-1){ $('#rightNav').hide() }
            else { $('#rightNav').show() }
        }


        //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
        function changePosition() {
            if(currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
                manageNav(currentPosition);
            } else {
                currentPosition++;
                manageNav(currentPosition);
            }
            moveSlide();
        }


        //moveSlide: this function moves the slide 
        function moveSlide() {
                $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
        }

    });
</script>

html实现示例：

<div id="slideshow"> <div id="slideshowWindow"> 
    <div class="slide"><div class="slideText"> <h2 class="slideTitle">Pas mus kainos visada lanks&#269;ios!</h2> <p class="slideDes">"Tik pas mus &#303;sigykite savo nauj&#261;j&#261; vandens filtravimo sistem&#261; palankiausiomis kainomis".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> 
    <div class="slide"><div class="slideText"> <h2 class="slideTitle">Naujas prekybos salonas</h2> <p class="slideDes">"Aplankykite mus naujai atsidariusiame prekybos salone &#352;ilal&#279;je S. Dariaus ir S. Gir&#279;no g. 24".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> 
    <div class="slide"><div class="slideText"> <h2 class="slideTitle">Ie&#353;kote galimybi&#371; partneriaujant?</h2> <p class="slideDes">"Susisiekite su mumis ir mes aptarsime abiem pus&#279;ms palankias s&#261;lygas!".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> 
    <div class="slide"><div class="slideText"> <h2 class="slideTitle">Turite klausim&#371;?</h2> <p class="slideDes">"Susisiekite su mumis ir m&#363;s&#371; specialistai pasistengs atsakyti  &#303; kiekvien&#261; j&#363;s&#371; u&#382;klaus&#261;.".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> 
    </div></div> 

---

这一问题有多种原因，所有这些因素共同作用于一场完美风暴：

您仅根据计时器对新幻灯片进行排队，而应在上一张幻灯片动画的回调中对其进行排队， 您使用的浏览器支持requestAnimationFrame，并且 您正在使用jQuery 1.6.2，其中包括对requestAnimationFrame的支持。 当您离开正在运行滑块的选项卡时，支持requestAnimationFrame的浏览器将停止该选项卡中运行的所有动画。但是，计时器将继续运行！当您返回页面时，所有排队的动画都会立即启动，这会给您带来这种失控的效果

要解决这个问题，最简单的解决方案是升级到jQuery 1.7.1，因为由于浏览器支持不一致，他们已经放弃了对requestAnimationFrame的支持。但是，他们最终会把它带回来，所以你真的应该修复你的代码

要修复代码，您应该只在上一张幻灯片的.animate的回调中对新幻灯片动画进行排队。这将确保即使动画未运行，也不会盲目排队

如果你需要更多的澄清，请告诉我。tl；dr:更改此选项：

 <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

为此：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

---

关于这个问题的jQuery bug有更多信息：

它的工作正常。。。你能更具体地说明什么是疯狂的吗？@RaghavBhushan你必须按照他的指示，切换到另一个选项卡，让他的选项卡在后台运行。而且，你必须使用Firefox或基于WebKit的浏览器才能发生这种行为。他没有失去wondow focus的监听器，所以更改标签会如何影响它。@RaghavBhushan阅读我的答案，发现：PIve也有同样的问题，但这只发生在我的在线网站上。在本地主机上一切正常。我使用的是硬币滑块，一个jquery滑块。我不知道如何解决这个问题，因为在他们的演示网站和我在线的其他网站上一切都很好。