how to disable a function before ajax call, and enable it on ajax success?

Question

I have a function is outside of ajax function, I want to disable this "enable" click function while ajax is running, and enable it after ajax successfully loads, how do I approach this exactly? Any help would be appreciated. Here is my code:

 $('enable').click(function () {
        console.log(123);
        $(this).css('display', 'none');

 var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) { 
            console.log(data);

    ; 

Answer 1

var enable = true;
$('enable').click(function () {
     if(enable) {
        enable = false;
        console.log(123);
        $(this).css('display', 'none');

         var xhr =  $.ajax({
            type: "POST",
            url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" +     val_l_name + "&country=" + val_country + "&language=" + $.langID,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                console.log(data);
                enable = true;
            }
        });
    }
});

You can set enable to false when the ajax is trigger.

EDIT:

somthing like this?

var enable = true;
$('enable').click(function () {
     if(enable) {
        console.log(123);
        $(this).css('display', 'none');
     }
});

function callAjax() {
    enable = false;
    var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" +     val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            console.log(data);
            enable = true;
        }
    });
}

Answer 2

if the ajax is inside the click function, then:

$('enable').click(function () {
     console.log(123);
     $(this).hide();
     var that=this;         

     var xhr =  $.ajax({
            type: "POST",
            url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) { 
                console.log(data);
                $(that).show();
            }
     });
});

else:

$('enable').bind('click',function () {
     console.log(123);
     $(this).unbind('click');
});

     var xhr =  $.ajax({
            type: "POST",
            url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) { 
                console.log(data);
                $('enable').bind('click',function () {
                    console.log(123);
                    $(this).unbind('click');
                });
            }
     });

Answer 3

Try to use .one instead of .on , then attach handler on success .

function sendRequest() {
  var xhr = $.ajax({
    type: "POST",
    url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) { 
      console.log(data);
      $('enable').one('click', sendRequest); // We restore it when get success
    }
}

$('enable').one('click', sendRequest); // once you clicked your handler would be removed

Answer 4

You can just have a flag that you can raise when you want to disable the click event:

$('enable').click(function () {
    if ($(this).data('disabled')) return;

    $(this).data('disabled', true);

    $.ajax({ ... }).always(function() { $(this).data('disabled', false); }.bind(this));
});

Use .always() to make sure it is enabled when the ajax request fails as well.