JQueryによるclass名での背景切り替え

質問

下記ソースでおかしな挙動がでているので質問させて頂きます。
jQuery導入済みで２つのブロックの背景に同じクラス名を指定した上で背景を一定時間ごとに切り替えているのですが、指定していたクラスタをid名からclass名に変えただけで切り替えがおかしくなりました。
id名のとき 00→01→00→01→00→01→……
class名のとき 00→01→00→00→01→01→01→01→……

クラス名にしたことが原因でしょうか？

function testBack(obj){
var t = '.changeBg';
if (obj>3){obj=0;}
$(t).fadeIn(1000).css('background','url('bg_0'+ obj +'.jpg) center top no-repeat');
obj++;
$(t).delay(8000).fadeOut(1000,function(){
setTimeout('testBack('+obj+')', 100);
});
}
$(document).ready(function(){
if ($('body').attr('class') != 'testBox'){
testBack(0);
var img=new Array();
img[0]=new Image();
img[0].src= rootPath+'commons/images/bg_00.jpg';
img[1]=new Image();
img[1].src= rootPath+'commons/images/bg_01.jpg';
}

});

回答No.1

mtaka2 · ベストアンサー

「２つのブロックの背景に同じクラス名を指定した」ということは、最初のtestBack(0)の呼び出しでは、その処理の中の

---
$(t).delay(8000).fadeOut(1000,function(){
setTimeout('testBack('+obj+')', 100);
});
---
ここでは、二つのブロックそれぞれについて、
「8秒待って、1秒フェードアウトして、それが終わったらsetTimeout('testBack(1)',100)を実行」という処理を行うことになります。

つまり、9.1秒後には「testBack(1)」が2回呼び出されてしまうのです。

そうすると、その次は、2回の「testBack(1)」の処理の中で、それぞれ2回、setTimeOut('testBack(2)',100)が処理されますから、
さらに9.1秒後には、「testBack(1)」が4回呼び出され、さらに9.1秒後は
testBack(2)が8回、…とtestBackの呼び出しがどんどん増殖していくことになってしまいます。

対策としては、クラス指定はやめてid指定にし、一つのtestBackが一つのtimeOutしか呼び出さないようにする、というのが確実でしょう。
ただし、testBackをidごとに2つ用意する必要はありません。
---
function testBack(t,obj){
if (obj>3){obj=0;}
$(t).fadeIn(1000).css('background','url('bg_0'+ obj +'.jpg) center top no-repeat');
obj++;
$(t).delay(8000).fadeOut(1000,function(){
setTimeout('testBack("'+t+'",'+obj+')', 100);
});
}
---
のように、testBackの引数にセレクタも指定するようにしておいて、
あとは最初のtestBack呼び出しを
testBack("#changeBg1", 0);
testBack("#changeBg2", 0);

の2行にすれば、9.1秒後には「testBack("#changeBg1",1)」と「testBack("#changeBg2",1)」が実行され、次の9.1秒後には「testBack("#changeBg1",2)」と「testBack("#changeBg2",2)」が実行され、…ということになり、
testBackの呼び出しが増殖することはなくなります。

お礼

大変ありがとうございました！
最初eachでも使うのかとかなり長いこと悩んでいたので別々に指定すればいいというのを完全に忘れておりました；
参考にさせていただきます！