【jQuery】Ajax通信中のボタン連打を防ぐ方法

専用のフラグを用意し、通信中は新たなAjax処理が発生しないようにif文で弾けばOK(厳密には「連打」そのものを防ぐわけではない)。

Ajax処理が終了した後は.always()の中でフラグをもとに戻すのを忘れずに。

Ajax通信中のボタン連打を防ぐ方法


$(function(){
    var canAjax = true;

    $('.hoge').on('click', function() {
        // Ajax処理中は新たな処理をスタートしない
        if(!canAjax) {
            console.log('通信中');
            return;
        }
        canAjax = false; // これからAjaxを使うので、新たなAjax処理が発生しないようにする

        // Ajax
        $.ajax({
            type:'POST',
            url:'https://example.com/hoge',
            dataType: 'json',
        }).done(function (results){
            // 成功時
        }).fail(function(jqXHR, textStatus, errorThrown){
            // 失敗時
        }).always(function() {
            // 成否に関わらず実行
            canAjax = true; // 再びAjaxできるようにする
        });
    });
});

$(function(){

var canAjax = true;

$('.hoge').on('click', function() {

// Ajax処理中は新たな処理をスタートしない

if(!canAjax) {

console.log('通信中');

return;

}

canAjax = false; // これからAjaxを使うので、新たなAjax処理が発生しないようにする

// Ajax

$.ajax({

type:'POST',

url:'https://example.com/hoge',

dataType: 'json',

}).done(function (results){

// 成功時

}).fail(function(jqXHR, textStatus, errorThrown){

// 失敗時

}).always(function() {

// 成否に関わらず実行

canAjax = true; // 再びAjaxできるようにする

});

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル