<!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>
More than 5 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme