クライアントサイドの多重送信防止

jQuery.ajax()の多重送信防止をまじめに考えてみたらいい感じにできた!!
多重送信を防止しつつ、通信完了後には送信可能になる。

var ajax_sending = false;
$(function() {
    // ajax多重送信防止
    $(document).ajaxSend(function(event, jqxhr, settings) {
        // ajax通信中はエラー
        if (ajax_sending) {
             toastr['warning']('ajax送信中です。完了までお待ちください。')
             jqxhr.abort();
             return;
        }

        ajax_sending = true;

        // 成功時にfalse
        jqxhr.done(function() {
            ajax_sending = false;
        }) ;

        // 失敗時もfalse
        jqxhr.fail(function() {
            ajax_sending = false;
        }) ;
    });

    // form多重送信防止
    $("form").submit(function() {
        var obj = this;
        if ($(obj).prop("data-sended")) {
            return false;
        }

        $(obj).prop("data-sended", true);
        setTimeout(function() {
            $(obj).prop("data-sended", false);
        }, 10000);
        return true;
    });
}

シェアする

  • このエントリーをはてなブックマークに追加

フォローする