質問: 0; $(".custom-block[id^='custom-block']").each(function(idx, obj) { if ($(obj).attr('id') != 'custom-block[0]') { frm_cnt++; $(obj) .attr('id', 'custom-block[' + frm_cnt + ']') // id属性を変更。 .find('select').each(function(idx, obj) { $(obj).attr({ id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') }); }); } }); }); // option再生成 console.log('#2'); generateOptions(); console.log('#3'); }); ``` (-)ボタンをクリックした際、それぞれ #1 -> #2 -> #3 の順に実行されると思ってましたが、意図しない動作の場合、 #2 -> #3 -> #1 の順に実行されます。 プログラムは上から下に流れるものとの思い込みなのかもしれませんが、何故意図しない動作となるか理由をご教授頂けないでしょうか。 以上、よろしくお願い致します。
回答: ``` // (-)buttonがクリックされた時の処理 $(document).on('click', '.del', function(){ var removeObj = $(this).parent(); removeObj.fadeOut('fast', function() { removeObj.remove(); console.log('#1'); // 中略 }); // option再生成 console.log('#2'); generateOptions(); console.log('#3'); }); ``` fadeOutメソッドは 「今からフェードアウトを始めてください。終わったら2番めの引数に指定した関数(ここに"#1"の表示が含まれている)を呼んでください」 というお願いをするだけの命令で、すぐさま(フェードアウトの完了を待たずに)次の処理、すなわち#2と#3の表示へと処理が移っていきます。 その後、フェードアウトが完了した時点で"#1" の表示がされるので、結果として "#2" -> "#3" -> "#1" の順に表示されます