$.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)と同じです。