
				<!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>