【jQuery】Ajax通信中、イベントを受け付けないようにしたい

Question

.btnをクリックするとAjax通信する以下の様なコードで

$container.on( 'click', '.btn', function()
{

	//ローディング画像を出す

	$.ajax({
		url: 'hoge.php'
	}).done( function() {
		...
	}).always( function() {

		//ローディング画像を消す

	});
}); 

コメントになってる部分を実装してみたのですが、Ajax通信中に
何度も.btnをクリックするとローディング画像が複数出て、Ajax通信も複数回行われてしまいました。

.btnをクリックすると、Ajax通信をし、通信中はローディング画像を表示し、通信が完了するまでクリックによるイベントを停止させるにはどうすればいいでしょうか。
どうかご教授ください。

Answer 1

click イベントが発火しないのではなくて、発火しても何も処理しない仕組みを作ればよいと思います。

<div id="sample" data-clickable="true"><input class="btn" type="button" value="button"></div>
<script>
jQuery('#sample').on('click', '.btn', function (event) {
  container = jQuery(event.currentTarget);

  if (container.attr('data-clickable') !== 'true') {
    return;
  }

  container.attr('data-clickable', 'false');

  jQuery.ajax({
    url: 'hoge.php'
  }).done(function () {
    // 処理
    container.attr('data-clickable', 'true');
  });
});
</script>

Re: og24715 さん

Answer 2

簡単な対策としては
・通信中画像を表示した時にボタンも一緒にdisabledにする
・通信中画像を消す時にボタンのdisabledを解除する

ボタンを変化させたくなければ、通信中フラグを立てたり画像表示状態を取得して、クリックイベントやキーダウンイベントを処理させない（通信中はreturnするように）対策をすればよいと思います

Answer 3

$.ajax のオプション、
async:false
を指定するとajax 通信完了まで画面が固まります。

がめんが固まるということは、アニメーションも止まるし、ボタン連打も出来なくなります。

ajax 通信中は、通信してる間だけ、画面は触れるけど一切反応なく、進捗表示用アニメーションも動作させたい、という場合、上記オプションを指定すると結果はNGですね。

簡単な実装だと、wi2ui, jquery-ui が有ります。 ie8 なんて使ってる人いないだろうけど、ajax 通信中、アニメーション画像表示中に背景のラジオボタンにタブキーで移動して改行すると ajax 通信が解除されるという謎の不具合がありました。
アニメーションを表示するのはいいのですが、タブキー押下で背景のコンテンツが触れなくなってることは確認した方があとあと手戻りが少なくなります。