【javascript】Ajax通信中のボタン連打防止対策

　システムの検索処理はAjaxを利用することが少なくない。しかし、注意しないと、ボタンの連打でAjax通信は予想外で複数実行されることがある。

　対策として、Ajax通信可否のフラグを用意し、通信中は新たなAjax処理が発生させないようにすれば良い。Ajax処理が終了した後、.always()の中でAjax通信可否のフラグを通信可能の状態に戻せば終わり。

//ajax連打防止
var doAjaxFlg = true;

$(function() {
    // 「検索」ボタン押下時処理
    $('#searchButton').click(function() {
        //Ajax通信中であれば、処理中止
        if(!doFlagAjax) {
            return;
        }
        //ajax通信できないようにする
        doFlagAjax = false;
	searchFunc();
    });
});	

// 検索処理
function searchFunc(){
    ……
    $.ajax({
        url : contextPath + '***/search',
        method : 'post',
        data : formData,
        processData : false,
        contentType : false,
        cache : false,
        timeout : 30000
    }).done(function(data, status, jqxhr) {
        //ajax通信の結果を処理する
	……	
    }).always(function() {
        // 成否に関わらず実行
        doFlagAjax = true; // 再びAjaxできるようにする
    });
};