jQueryのAjax非同期処理でcssを即時変更する方法 #jQuery


                <!DOCTYPE html>
                <html lang="ja">
                <head>
                <meta charset="UTF-8">
                <title>jQueryのAjax非同期処理でcssを即時変更する方法</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
                </head>
                <body>

                <div id="loading_information_id_button_a" style="display:none;">
                <h1>【ボタンA押下】ループ処理（何らかの重たい処理）を実行中。しばらくお待ちください。</h1>
                <img src="http://www.pixelimage.jp/blog/images_loading_gif/icon_loader_f_ww_01_s1.gif">
                </div>
                <div id="loading_end_information_id_button_a" style="display:none;">
                <h1>【ボタンA押下】【Complete!】ループ処理（何らかの重たい処理）が終わりました。</h1>
                </div>

                <h2 class="yamato_red">ボタンAを押してください。重たい処理が実行中でも、その完了を待たずして、この文字の背景色を即時、赤色にできます。</h2>

                <hr>
                <button class="btn_a">ボタンA</button>
                <hr>

                <script>
                // ボタンAをクリックしたときのイベント。
                $(document).on('click', '.btn_a',function(e){
                    var type='ボタンA';
                    alert('あなたは'+ type + 'を押しました。');
                    $(".btn_a").prop("disabled", true); // ボタンを非活性にして連続押下できなくする。
                    $(".btn_a").css("background-color", 'black'); // 押せないボタンの色を暗くする。
                    $(".yamato_red").css("background-color","red");
                    $("#loading_information_id_button_a").show(); // 「実行中」メッセージを表示する。
                    alert(type + ' 今からajaxで大量ループ（スリープ）に入ります。');
                    $.ajax({
                      success: function() {
                        yamatoSleepTimer(type);
                        $("#loading_information_id_button_a").hide(); // 「実行中」メッセージを隠す。
                        $("#loading_end_information_id_button_a").show(); // 「終わりました」メッセージを出す。
                        $(".yamato_red").css("background-color","white"); // 赤色に変えた背景色を白色に戻す。
                        $(".btn_a").prop("disabled", false); // ボタンを押せるようにする。
                        $(".btn_a").css("background-color", ''); // ボタンの色を元に戻す。
                      }
                    });
                    alert(type + '   ：クリックイベントの最後に来たよ。');
                });

                //
                // 大量ループによるスリープ関数。
                //
                function yamatoSleepTimer(type){
                  alert(type+'：スリープ関数に入ったよ！今から大量ループするよ。ブラウザのconsole.logを見てね！');
                  for(var i=0; i<200000; i++){
                    var jikan= new Date();
                    var hour = jikan.getHours();
                    var minute = jikan.getMinutes();
                    var second = jikan.getSeconds();
                    var dispTime = hour+':'+minute+':'+second;
                    console.log(type + '：時刻 '+ dispTime + '   '+ i);
                  }
                }

                </script>
                </body>
                </html>