Javascriptの実行順序について

###前提・実現したいこと
動的にセレクトメニューを追加/削除し、且つ選択した値は他のセレクトメニューでは選択できないよう制御するフォームを作成しております。

フォーム自体は完成したのですが、元々書いていたコードでは意図した動きとならず、以下に記載するように記載すると意図した動作となりました。

###該当のソースコード
問題箇所のみ抜粋（意図した動作）：

// (-)buttonがクリックされた時の処理
$(document).on('click', '.del', function(){
    var removeObj = $(this).parent();
    removeObj.fadeOut('fast', function() {
        removeObj.remove();
console.log('#1');
        // 番号振り直し
        frm_cnt = 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');

    });
});

問題箇所のみ抜粋（意図しない動作）：

// (-)buttonがクリックされた時の処理
$(document).on('click', '.del', function(){
    var removeObj = $(this).parent();
    removeObj.fadeOut('fast', function() {
        removeObj.remove();
console.log('#1');
        // 番号振り直し
        frm_cnt = 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 の順に実行されます。

プログラムは上から下に流れるものとの思い込みなのかもしれませんが、何故意図しない動作となるか理由をご教授頂けないでしょうか。

以上、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1// (-)buttonがクリックされた時の処理
2$(document).on('click', '.del', function(){
3    var removeObj = $(this).parent();
4    removeObj.fadeOut('fast', function() {
5        removeObj.remove();
6        console.log('#1');
7        // 中略
8    });
9    // option再生成
10    console.log('#2');
11    generateOptions();
12    console.log('#3');
13});

fadeOutメソッドは
「今からフェードアウトを始めてください。終わったら2番めの引数に指定した関数（ここに"#1"の表示が含まれている）を呼んでください」
というお願いをするだけの命令で、すぐさま（フェードアウトの完了を待たずに）次の処理、すなわち#2と#3の表示へと処理が移っていきます。
その後、フェードアウトが完了した時点で"#1" の表示がされるので、結果として
"#2" -> "#3" -> "#1"
の順に表示されます

投稿2016/08/25 07:39

編集2016/08/25 07:41

hoge1e3

総合スコア19

samuraiders

2016/08/25 07:54 編集

ご確認頂き、ありがとうございます。なるほど。 fadeOutの場合完了を待たずに次の処理が実行されてしまうということですね。それでコールバック関数内に書かれていれば意図した動作をするが、そうでなければ動作しない理由が納得できました。こういう動作をするものを非同期処理という言葉で表すと認識してますが、あってますでしょうか。