JavaScriptスライダーがしばらくして狂ったようにスライドする

Question

このスライダーをサイトにしばらく放置すると、狂ったように滑り始めます。このバグをテストするには？ bellated.com/vyrai（テストページ）を開きます。大きなチェンジ写真を見ることができます。それを1分間放置する。他のブラウザタブを参照してください。このサイトに戻ると、スライダのバグが表示されます。任意のアイデアをどのようにこれを修正するには？

私はこのスクリプトを使用しています：

 <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> 

Answer 1

この問題は、すべてが完璧な嵐の中で一緒に働く複数の原因があります。

• あなたがキューイングされています前のスライドのコールバックにそれらをキューイングする必要があるときに、タイマーだけに基づいて新しいスライドをアップimation、
• requestAnimationFrameをサポートするブラウザを使用していて、
• requestAnimationFrameのサポートを含むjQuery 1.6.2を使用しています。

あなたは離れてスライダがで実行されているタブから移動すると、requestAnimationFrameのをサポートするブラウザは、そのタブで実行されているすべてのアニメーションを停止します。ただし、タイマーは引き続き実行されます。ページに戻ると、キューに入れられたすべてのアニメーションが即座に起動し、この暴走効果が得られます。

この問題を解決するには、ブラウザのサポートが不一致であるためrequestAnimationFrame（）のサポートを中止したので、最も簡単な解決策はjQuery 1.7.1にアップグレードすることです。しかし、彼らは最終的にそれを戻すことになるので、コードを修正するだけです。

コードを修正するには、前スライドの.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> 

：この変更http://bugs.jquery.com/ticket/9381