UNIRRY

WEBデザインとホロスコープと宇宙のブログ

スライダーを自作したら、タブに戻った際setintervalが実行されまくってる

slide3

jQueryのスライダー自作やアニメーションの連続動作やらで「一定時間内での関数の繰り返し」の部分には、setinterval関数を使うと思うのですが、setintervalを使用すると、タブブラウザで使用しているページを開いたまま、ほかのタブをしばらく見て、再度setintervalを使用しているタブに戻ったとき、見たことのないスピードでsetinterval関数が実行されてる・・・!という現象があります。

挙動をみるかぎり、どうやら、ほかのタブを見ている間、setintervalを使用しているページの関数の繰り返しが、裏で実行されずにキューとして溜まっているようで、再度タブを見た際に、溜まっていた分が一気に実行されるから、超高速で関数が実行されちゃうみたいでした。

タブで違うものを見られたときにも、一度setintervalをクリアしとかなきゃいけないということなので、以下、回避できたやり方を記載します。

つくるのは、①windowを開いた時点で関数の実行 ②タブで違うものが見られたとき=windowからフォーカスがはずれたらsetintervalを停止 ③もっかいwindowにフォーカスがきたら再実行 とします。

windowからフォーカスがはずれた際に、setinteval関数をクリアするjs

// 変数定義
var autoSlide;

// 5秒ごとにnextReturn関数の呼び出し
function autoSlideDo() {
    autoSlide = setInterval(nextReturn, 5000);
}

// このウィンドウにフォーカスを設定してsetinterval実行
$(window).focus();
autoSlideDo();
  
// このウィンドウからフォーカスがはずれたらsetintervalをクリア
$(window).bind("focus",function(){
    clearInterval(autoSlide);
    autoSlideDo();
}).bind("blur",function(){
    clearInterval(autoSlide);
});

これで完璧だよ☆芦田愛菜だよ☆

その処理をいれといた自作スライダー

あしだまなだよ☆


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3