2011-11-10 7 views
0

私はjQueryで構築された画像スライダーを持っています。これは7000ミリ秒の間隔で画像をスライドするように設定されています。スライダが超高速(スライド間で約1秒の間隔)で画像をスライドさせることは、時には、時にはときどきだけであると思われます。私は原因を特定できません。助けてください!スライダーを持つサイトへjQuery setInterval()の問題?

リンク: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(); 
     }); 


    }; 
+0

私はまだこのバグを見たことがありません、それはいつ起こるか記述できますか?なにするの? – OptimusCrime

答えて

2

setIntervalには重大な問題があります。メモリに残ります。したがって、テスト中にページをリフレッシュし、同じプロシージャに対してさまざまなsetIntervalを作成する可能性があります。時には、プロシージャがより高速に実行されていることが分かります(実際には、setIntervalは複数回発生しています)。

var "my-interval" = setIntervalを使用してsetIntervalを実行する前に、それが存在するかどうか(ゼロではない)をチェックすることで、同様の問題を解決できました。もしそうなら、それを殺すか、まったく実行しないでください。

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

コードの下のセクションに時間の値を増やしてみてください:

$(".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. 

値がミリ秒単位で、アニメーションの速度を定義します。

[EDIT]

[OK]を、あなたはに戻ったときに私が観察したものから、私は、その後、あなたはタブで開いているWebページを離れるときにのみ、高速スライディング問題を得ると思いますし、他のタブで作業を続けますタブをクリックすると、画像が速いペースでスライドします。しかし、あなたがタブに留まるなら、それは起こらない。私の推測では、のChromeブラウザでこの問題に気づいたということです。

スクリプトに問題はないようですが、Chromeブラウザが動作する方法のみです。タブをバックグラウンドにしておくと、chromeはおそらくsetInterval()関数を一時停止し、ページに戻るとバックグラウンドにあった時間に実行します。これはおそらくChromeブラウザが動作する方法です。コードに問題はありません。

+0

その値を増減すると、ピクチャのスライド速度が増減しますが、それでも問題は解決しません。スライディングアニメーションの間の時間間隔は、照射的に振る舞います。 – JacobiOjera

+0

@ user1026649私は答えを更新しました、あなたは説明を見てみることができます。しかし、コードに問題はないようです。 –