ソースを全て載せるわけにはいかないが、
scriptaculousを使っていたら、下記のソースのようなことが起きた。
/**
* エフェクト付きでfoo領域を消して、bar領域を表示する
*/
function foo_blindup(){
Effect.BlindUp('foo', { // fooが最終的には表示されなくなる
afterFinish: function(){
Eeffect.BlindDown('bar');
}
});
$('foo_ul').update(''); // foo領域内のfoo_ul領域内をクリアする
}
/**
* foo領域が表示されていれば、処理を行う
*/
function foo_exec(){
if($('foo').visible()){
// fooが表示されているときの処理
$('foo_ul').update('<li>test</li>');
}
// 他にやりたい処理
}
// fooを消して、barを表示する
foo_blindup();
// fooが表示されていないので、if文内の処理はされないはず!
foo_exec();
// ところが、alertで<li>test</li>が出る。
alert($('foo_ul').innerHTML);
原因を探るべく、以下のように修正
// fooを消して、barを表示する
foo_blindup();
// この時点で、alertの中身は空
alert($('foo_ul').innerHTML);
// あとは変わらずに処理
foo_exec();
// ここでも、alertの中身は空に!!
alert($('foo_ul').innerHTML);
foo_exec()の前にalertを出すと処理をパスし、alertを出さないと処理される…。
なんだこれは???と小一時間悩んだ末に気付いたのが、
BlindUp処理が完了し終わってない間にfoo_exec()がコールされているのでは?ということだった。つまり、alertを出した場合は、alertを出している間にBlindUp処理が終わり、foo_exec()がコールされてもif文内の処理が行われないということだ。なんということだ。
結局、以下のように修正。
/**
* foo領域が表示されていれば、処理を行う
*/
function foo_exec(){
if($('foo').visible()){
// fooが表示されているときの処理
$('foo_ul').update('<li>test</li>');
}
// 他にやりたい処理
}
// fooを消して、barを表示する
Effect.BlindUp('foo', { // fooが最終的には表示されなくなる
afterFinish: function(){
$('foo_ul').update(''); // foo領域内のfoo_ul領域内をクリアする
Eeffect.BlindDown('bar');
foo_exec(); // afterFinish後なので、foo領域はdisplay:none;になっている
}
}
