javascript - ajax运行时如何禁用点击功能，同一个点击启动ajax运行，ajax完成后，重新启用点击功能

Question

我有一个点击功能启动 ajax post 运行，如何在 ajax 运行时禁用相同的点击功能，并在 ajax 完成后重新启用它？下面的代码显示了我想要的:

    $('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');
    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) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);

           });
        }
    });

Answer 1

$('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');

    var that = $(this); //to reference the button easier
    that.attr('disabled',true); //disables the button

    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) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);

           });

           that.attr('disabled',false); //enables the button the button

        }
    });