ソースを全て載せるわけにはいかないが、
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;になっている
    }
}

Tweet