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

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

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

//ajax連打防止
<span class="bold-red"><span class="bold-green">var doAjaxFlg = true;</span></span>

$(function() {
    // 「検索」ボタン押下時処理
    $('#searchButton').click(function() {
        <span class="bold-green">//Ajax通信中であれば、処理中止</span>
        <span class="bold-red"><span class="bold-green">if(!doFlagAjax) {
            return;
        }</span></span>
        <span class="bold-green">//ajax通信できないようにする</span>
        <span class="bold-green">doFlagAjax = false;</span>
    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通信の結果を処理する
    ……  
    <span class="bold-green">}).always(function() {
        // 成否に関わらず実行
        doFlagAjax = true; // 再びAjaxできるようにする
    });</span>
};