$.ajax(jQuery)を、クリック連打されても安心にする

ajaxが走っているときにもう一回ajaxが走ると怖いので、そうしないようにしました。


#1. ajax使用中!というフラグを、$.ajax()実行時に立ち上げる。
#2. ajax使用中!というフラグを、$.ajax()実行終了時にもとに戻す。
#3. ajax使用中!というフラグがあるとき、$.ajax()は実行しない。

この3つを作ればいいわけです。
どう実現したっていいですが、
#11. ajax使用中フラグは外から変更不能なスコープにしまっておくことで保守性を向上させる(要はクロージャ使う)
#12. jQuery拡張にしてみる
#13. $.ajax()実行終了というのは、response処理イベントが終了したタイミングってことにする。

という話にしましょう。
なお、13は大事。
ajaxのリクエスト発行終了時にajax使用中フラグを解除してしまわないように。

$(function(){
  jQuery.extend({   // #12
    ajaxSingle: (function(options){
      var ajaxSending = false;  // #11
      return function(options){
        try{
          if(!ajaxSending){ // #3
            ajaxSending = true;
            /* options.completeの最後に、フラグを解除する設計に。 */
            options.complete = (function(){
              var complete = typeof(options.complete)=="function" ? options.complete : function(a,b){} ;
              return function(a,b){
                ajaxSending = false; // #2, #13
              };
            })();
            $.ajax(options);
          } else {
             // フラグがあるときは何も実行しない。#3
          }
        }catch(e){
          ajaxSending = false; // #2
        }
      };
    })()
  }); 

使い方

$.ajaxSingle({
     "type": "post",
     "data": { "id": 1, "name": "hoge" },
      "url": "/hoge"
});

要するに$.ajax(options)と同じです。