javascript - タブが非アクティブな場合、jQuery setInterval が速すぎる

Question

私のウェブサイトが表示されているタブがアクティブでない場合、私のスライドショーは写真の切り替えが速すぎて、全体が台無しになります。

これを修正する方法はありますか？

var img_src = ["1.png", "2.png", "3.png", "4.png"];
var delay = 8000;
var first_run = true;

function switch_pic(position){
  $("#show").attr("src", img_src[position]).fadeOut(0).fadeIn(4000).fadeOut(4000);
}

$(document).ready(function(){
  var i = 0;
  if(first_run){
    switch_pic(i);
    first_run = false;
    i++;
  }
  window.setInterval(function(){
    switch_pic(i);
    delay += 8000;
    i++;
    if(i > 3){   
      i = 0;
      window.clearInterval();
    }
  }, delay);
});

Answer 1

なぜ物事が加速するのかわかりません。通常、バックグラウンド タブのタイマーは少なくとも 1 秒遅くなりますが、これはシナリオには影響しません。関数の呼び出しを追跡するには、console.log() を使用することをお勧めします。

また、メイン ループを少し単純化することもできます。

$(document).ready(function(){
  var i = 0;
  window.setInterval(function(){
    switch_pic(i++); // increase i after call
    if(i > 3) i = 0; // reset i
  }, 8000);
});

Answer 2

これでコードをラップできます：

$(document).ready(function(){
    $([window, document]).focusin(function(){
       //code run when tab is selected
    }).focusin(function(){
       //code to stop all animation
    });
});

これにより、ユーザーがサイトを表示しているときにのみスライドショーを実行できます.